SVG是是用来制作矢量图的HTML5标签,用来定义SVG图形的容器。SVG可以绘制框、圆、路径、图形图像。在使用SVG标签的时候,可以将标签添加到HTML body中,在为它添加对应的css样式。
SVG 是是用来制作矢量图的 HTML5 标签,用来定义 SVG 图形的容器。SVGg 可以绘制框、圆、路径、图形图像。在使用 SVG 标签的时候,可以将标签添加到 html body 中,在为它添加对应的 css 样式。
SVG 是什么
SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签。你只需定义好 XML 属性,就能获得一致的图像元素。使用 SVG 之前先将标签加入到 HTML body 中。就像其他的 HTML 标签一样,可以为 SVG 标签为之添加 ID 属性。SVG 支持 css,这一点有效的将图形和样式区分开。,例如“border-style:solid;border-width:2px;”。SVG 标签跟其它的 HTML 标签有通用的属性。将 SVG 元素加入到 HTML 代码中,SVG 提供很多绘图形状,例如线条、圆、多边形等。
SVG 的应用
绘图动画
SVG 标签用法
SVG 元素可以通过、或者嵌入网页之中,但是我们这里推荐使用,兼容性比较好。
SVG 标签属性
fill: 填充色 | url(id)这里主要是引用渐变色作为背景stroke: 线条的颜色stroke-width: 线条的宽度stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ,round 和 square 会影响线条的长度opacity: 不透明度 0~1fill-rule: nonzero (非零环绕原则)evenoddstroke-dasharray: 创建虚线数组 x,y,z,… (长度,间隔,长度,间隔,。。。。)stroke-dashoffset: 偏移filter: url(id) 添加滤镜
clipPath-裁剪
能限制哪些地方可见,哪些地方不可见。标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来)。剪切路径是用 clipPath 元素定义的,属性 clip-path 可用来引用剪切路径。默认情况下,一个形状,其被剪切掉的区域(不可见的区域)是不响应鼠标事件的。
g-分组
g 标记就是’group’的简写,是用来分组用的,它能把多个元素放在一组里,对 g 标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承 g 标记上的所有属性。用定义的分组还可以使用 use 进行复制使用。