首页 前端知识 HTML5(七)——SVG基础入门,复习指南

HTML5(七)——SVG基础入门,复习指南

2024-05-13 10:05:11 前端知识 前端哥 697 150 我要收藏

==========

2.1、svg 标签

SVG 的代码都放到 svg 标签呢,SVG 中的标签都是闭合标签,与html中标签用法一致。svg的属性有:

  • 有width和height,指定了svg的大小。

eg:画一条直线,完整代码如下:

Document

上述 svg 设置的宽高没有带单位,此时默认是像素值,如果需要添加单位时,除了绝对单位,也可以设置相对单位。

  • viewBox 属性

使用语法:

四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分,由上述四个参数决定。

使用 viewBox 之后,相当于svg整体大小不变,只能看到 viewBox 设置部分,视觉上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代码可以直接嵌入到 html 页面中,也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件,SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用?

2.2.1、embed 嵌入:

使

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8476.html
标签
评论
发布的文章

Markdown基础与进阶语法

2024-06-30 22:06:12

零基础 HTML 入门(详细)

2024-06-30 22:06:09

CSS3基本语法

2024-06-30 22:06:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!