一、内置图形:
rect(矩形)
circle(圆)
ellipse(椭圆)
line(直线)
polyline(折线)
polygon(多边形)
path(路径)
text(文本)
image(图形)
use(复制元素)
二、内置图形的html属性或(css样式):
fill(填充颜色)
fill-opacity(填充透明度)
stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]
三、基本元素用法
1、矩形
基本用法
<rect x="0" y="0" width="100" height="100" fill="#f06"/>
<!--x表示横坐标,y表示纵坐标,width表示宽,height表示高-->
扩展用法
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
<rect x="50" y="20" width="150" height="150"
fill="red" stroke="blue" stroke-width="20" fill-opacity="1" stroke-opacity="0.1"/>
2、圆
基本用法
<circle cx="100" cy="50" r="100" fil='#f06'/>
<!-- cx表示圆心横坐标,cy表示圆心纵坐标,r表示半径 -->
扩展用法
<circle cx="100" cy="50" r="40"
style="stroke:blue;stroke-width:10;fill:pink"/>
<circle cx="100" cy="50" r="40"
stroke="black" stroke-width="2" fill="red"/>
3、椭圆
基本用法
<ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/>
<!-- cx表示圆心横坐标,cy表示圆心纵坐标,rx表示横向半径,ry表示纵向半径 -->
扩展用法
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
<ellipse cx="300" cy="80" rx="100" ry="50"
fill="pink" stroke="red" stroke-width="2"/>
4、直线
基本用法
<line x1="0" y1="100" x2="100" y2="0"/>
<!-- x1起点横坐标,y1表示起点纵坐标,x2表示终点横坐标,y2表示终点纵坐标 -->
扩展用法
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
<line x1="0" y1="0" x2="200" y2="200"
stroke="red" stroke-width="10"/>
5、多边形
基本用法
<polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>
<!-- 200,10为第一个点 250,190为第二个点 160,210为第三个点 -->
扩展坐标
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
<polygon points="200,10 250,190 160,210"
fill="red" stroke="blue" stroke-width="1" />
第一个点和最后一个点会连接起来,形成闭合的图形
6、折线
基本用法
<polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>
扩展用法
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:none;stroke:red;stroke-width:4" />
<!--此处将fill设置为none,可以仅仅画曲线,而如果fill有值,则会形成由曲线围城的多边形-->
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:blue;stroke:red;stroke-width:4" />
第一个点不会和最后一个点连起来,不会闭合
四、图形元素用法
1、路径
路径是svg中最强大的图形
路径是由一系列命令所组成。
命令 名称 参数
M moveto 移动到 (x y)+
Z closepath 关闭路径 (none)
L lineto 画线到 (x y)+
H horizontal lineto 水平线到 x+
V vertical lineto 垂直线到 y+
A elliptical arc椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
C curveto 三次贝塞尔曲线到 (x1 y1 x2 y2 x y)+
S smooth curveto光滑三次贝塞尔曲线到 (x2 y2 x y)+
Q Bézier curveto二次贝塞尔曲线到 (x1 y1 x y)+
T smooth Bézier curveto光滑二次贝塞尔曲线到 (x y)+
如果指令字母是大写的,例如M, 则表示坐标位置是绝对位置;如果指令字母小写的,例如m, 则表示坐标位置是相对位置。
基本用法
<path d="M150 0 L75 200 L225 200 Z" />
<!-- d属性中包含所有路径的点,最后起点和终点连接起来形成闭合图形 -->
扩展用法
<path d="M150 0 L75 200 L225 200 Z"
fill="red" stroke="blue" stroke-width="10"/>
1.1、贝塞尔曲线(CSQT简称“厕所切图”)
(1)、三次贝塞尔曲线
Cx1 y1, x2 y2, x y
x1,y1 和x2,y2分别为控制点1和2,而x,y为曲线上的关键点
下面为曲线上的点随着时间的变化而变化的过程。
<path d="M20 20 C90 140,130 140,200 25" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
(2)、光滑三次贝塞尔曲线
Sx2 y2, x y
S指令跟在C指令或S指令后面补刀,它会自动在C、S基础上生成一个对称点,所以S指令只需要两个点就可以。
<path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120 S380 150, 450 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 S80 150, 150 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
(3)、二次贝塞尔曲线
Qx1 y1, x y
(x1,y1)是控制点,(x,y)表示的是曲线的终点。
下面为曲线上的点随着时间的变化而变化的过程。
<path d="M20 80 Q90 140, 130 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
(4)、光滑二次贝塞尔曲线
Tx y
T指令和S指令类似,是给Q、T指令补刀的,T指令只有一个曲线终点,没有控制点(由Q的对称点自动生成);
也可以单独使用,当单独使用时,是一条直线;
<path d="M20 80 Q90 140, 130 80 T250 140 T350 40 " stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 T350 140 " stroke="#000000" fill="none" style="stroke-width: 2px;"/>
1.2、圆弧
A rx ry x-deg large-arc sweep-flag x y
rx ry表示x轴半径和y轴半径,x-deg表示x轴旋转角度,large-arc表示大于180度还是小于180度(0为小,1为大),sweep-flag表示弧线方向(0为沿逆时针,1为沿顺时针),x y为最终坐标。
<path d="M80 80 A45 45, 0, 0, 0, 125 125" fill="green" />
2、文本
基本用法
<text x="10" y="15">I love SVG</text>
扩展用法
<text x="0" y="15"
fill="red" transform="rotate(30 20,40)">I love SVG</text>
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>
<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
i LOVE d3
</text>
<!-- dx,dy表示平移的距离 -->
<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
I LOVE <tspan fill="red">D3</tspan>
</text>
<!-- 使用tspan对文本中的部分特殊定义 -->
沿path方向排列文本textPath
<path id="wavyPath" d="M75,100 a50,25 0 1,0 50,25" fill="none" />
<text x="50" y="50" font-size="14">
<textPath xlink:href="#wavyPath">
Text travels along any path that you define for it.
</textPath>
</text>
3、image图像
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" x="0" y="0" height="200" width="300"/>
x表示图像左上角在水平方向的位移,
y表示图像做商检在竖直方向的位移,
height,width分别为image的高度和宽度。
注意:默认图像不会缩放,即使定义了height,width,也不会缩放铺满剩余区域,
如果要控制image的缩放,需要设置preserveAspectRatio值。
preserveAspectRatio="<align> [<meetOrSlice>]"
-
meetOrSlice只有两个值:meet|slice, 默认meet
meet表示保留长宽比,image或者viewbox在定义的width和height区域都是可见的。 slice表示保留长宽比,但是整个 定义的width和height区域都由image覆盖,如下(很神奇,被拉直了,原图是折的)
-
align有一下值:none|xMinYMin|xMidYMin|xMaxYMin|...
none表示,图片避讳保持长宽比,直接按照100%,在image的width和height指定的区域铺满,
除none之外,其他的值都是表示在保持长宽比没有铺满时的放置位置的。如xMidYMin,表示水平上,放在中间,竖直上,放在开头。
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
x="0"
y="0"
height="200"
width="300"
preserveAspectRatio="xMidYMin meet"/>
4、use
该<use>元素从SVG文档中获取节点,并在其他位置复制它们。
当use复制其他元素后,还能对复制的元素进行属性的覆盖。
x, y, width, height,href这几个属性,不管源 元素是否有设置,都可以覆盖。
而其他属性,如果源 元素已经设置,则无法覆盖,如果没有设置,则可以再use上设置。
<svg viewBox="0 0 30 10"
xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle"
cx="5"
cy="5"
r="4"
stroke="blue" />
<use href="#myCircle"
x="10"
fill="blue" />
<use href="#myCircle"
x="20"
fill="white"
stroke="red" />
</svg>
可以看到设置的x属性覆盖成功了,第二个use的fill也设置成功了,但是第三个use 的stroke没有变成红色,因为circle已经指定了,所以无法覆盖。
五、容器元素用法
1、链接元素
svg的链接元素 a和html的链接元素a很相似,都是指向一个超链接。
在svg的a元素中,可以包含任何的形状
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- A link around a shape -->
<a href="/docs/Web/SVG/Element/circle">
<circle cx="50" cy="40" r="35"/>
</a>
<!-- A link around a text -->
<a href="/docs/Web/SVG/Element/text">
<text x="50" y="90" text-anchor="middle">
<circle>
</text>
</a>
</svg>
注意: 在获取svg的a元素时,为了区分html的a元素,要加命名空间
//css
@namespace svg url(http://www.w3.org/2000/svg);
svg|a {}
2、defs
defs元素通常用来存储在后续将会用到的图像,其 defs中的图像,不会直接呈现,必须在后续通过其他元素 引用才能呈现。
相当于在js中,封装的一个方法,供其他地方调用。 在这里,是封装了一段html,供后续的html调用。
一般情况下,defs中用来定义过滤,渐变,填充(pattern)等效果。
<svg viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- 定义一个线性渐变,外部的所有元素都可以引用这个效果 -->
<linearGradient id="myGradient"
gradientTransform="rotate(90)">
<stop offset="20%"
stop-color="gold" />
<stop offset="90%"
stop-color="red" />
</linearGradient>
</defs>
<!-- 在defs的外部通过使用url(defs中的id值) 来引用defs中定义的图形 -->
<circle id="myCircle"
cx="0"
cy="0"
r="5"
fill="url('#myGradient')" />
</svg>
3、g
<g>元素是一个用于对其他SVG元素进行分组的容器。
在<g>元素上设置的属性和变换,会统一影响g分组中的所有元素,会把g元素当成一个整体处理。
和前面的defs类似,只是<g>中的元素会直接作为一个整体呈现,可以不需要引用就能呈现,当然也能被use复制。
<svg width="300" height="300"
xmlns="http://www.w3.org/2000/svg">
<!-- 将g中的元素作为一个整体,统一设置stroke,transform等 -->
<g id="myG"
stroke="green"
transform="rotate(20 20,40)"
stroke-width="5">
<circle cx="40"
cy="40"
r="25" />
<circle cx="60"
cy="60"
r="25" />
</g>
<!-- 使用use复制g,并且覆盖fill属性 -->
<use href="#myG"
x="100"
fill="blue" />
</svg>
4、mask
mask元素定义了一个alpha通道(我也不懂,大概懂PS的大神才知道),用于将当前对象合成到背景中,在其他元素上通过mask属性来引用。
其本身不会呈现,必须被其他元素引用才能呈现。
<svg viewBox="-10 -10 120 120">
<!-- 定义一个mask 遮罩 -->
<mask id="myMask" x="0" y="0">
<rect x="0"
y="0"
width="100"
height="100"
fill="red" />
<!-- Everything under a black pixel will be invisible -->
<path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="blue" />
</mask>
<polygon points="-10,110 110,110 110,-10"
fill="orange" />
<!-- 通过mask属性引用 mask元素 -->
<circle cx="50"
cy="50"
r="50"
mask="url(#myMask)" />
</svg>
不定义mask时这样
定义后这样
不可思议。。。
mask元素有以下属性
- x 此属性定义遮罩区域左上角的x轴坐标。
- y 此属性定义遮罩区域左上角的y轴坐标。
- width 此属性定义遮罩区域的宽度。
- height 此属性定义遮罩区域的高度。
- maskContentUnits: userSpaceOnUse|objectBoundingBox, 默认为userSpaceOnUse, 对mask中的内容定义坐标系类型。如上面的react中的x,y等属性
- maskUnits: userSpaceOnUse|objectBoundingBox, 默认为objectBoundingBox, 对mask本身定义坐标系类型。如mask上的x,y等
userSpaceOnUse此值表示<mask>元素内的所有坐标都是指创建蒙版时定义的用户坐标系。
objectBoundingBox此值指示<mask>元素内的所有坐标都相对于应用蒙版的元素的边界框。
5、pattern
pattern元素定义了一个填充对象,这个对象,可以在其寄宿元素内重复 平铺 覆盖以占满寄宿元素(谁引用pattern,谁就是寄宿元素)。
一般情况下,元素通过自身属性的fill或者 stroke来引用pattern元素。
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>
pattern里面不仅可以使用图案,还能放置图片<image>元素。但是不管放置哪个。里面的图形,都会保持图形自身的长宽比平铺,并不会按照pattern定义的width,height,100%占满 pattern。
如果不能100%占满 pattern,那么当 pattern在寄宿元素上,重复平铺时,每个pattern之间看起来就会有间隔。
//宽度变为20%
<pattern id="star"
width="20%"
height="10%"
viewBox="0 0 10 10">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
pattern的属性
- x x坐标起始位置。
- y y坐标起始位置。
- width pattern的宽度。
- height pattern的高度。
- viewBox 定义pattern元素的的SVG视口的边界。
- preserveAspectRatio 定义当前元素指定的width,height与里面元素实际展示的尺寸的比例变换关系。
preserveAspectRatio决定的是当前元素定义的width,height属性和里面元素实际展示的关系。 默认里面的元素保持自身的长宽比,即使preserveAspectRatio所在元素的width,height超过了里面元素的实际宽,高。
如果为none,则表示里面的元素在水平、竖直方向上100% 占满pattern定义的width,height。
//设置preserveAspectRatio
<pattern id="star"
width="20%"
height="10%"
viewBox="0 0 10 10"
preserveAspectRatio="none">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
这样pattern中的元素会在 pattern定义的20%,10%的宽高上平铺。
除了svg之外,css中的clip-path也可以通过裁剪的方式做圆、椭圆的剪切。
clip-path: inset(40px 25px 20px 0px); //距上为40, 距离右边为25,距下面为20,距离左边为0的矩形
clip-path: circle(200px at 0px 0px); //以0 0 为圆心,200为半径的圆
clip-path: ellipse(100px 50px at 50% 50%); //x轴半径为100, y轴半径为50,圆心为50% 50%的椭圆
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%); //多边形,每一个为一个顶点
6、marker
marker元素定义了用于在给定的<path>、<line>、<polyline>或<polygon>元素上绘制箭头或 多点标记 的图形。
在元素上使用 marker-start, marker-mid, 和 marker-end 属性,来引用marker元素。
marker有如下属性:
- markerHeight: 定义marker元素的高度
- markerWidth: 定义marker元素的宽度
- markerUnits: 该属性为markerWidth、markerHeight以及marker的内容 定义了坐标系统。 userSpaceOnUse|strokeWidth
- orient:定义marker相对于寄宿元素的方向,值有auto|auto start-reverse|<angle>。
- refX: marker元素相对于X轴的偏移。和正常坐标系相反,正值向左,负值向右。
- refY:marker元素相对于Y轴的偏移。和正常坐标系相反,正值向上,负值向下。
- viewBox: 当前marker片段定义SVG视图端口的边界。
- preserveAspectRatio:定义了如果marker片段嵌入到具有不同纵横比的容器中,则必须如何对其进行变形。
注意:
如果一个元素定义了marker-start,那么就在开头的位置添加marker,
如果一个元素定义了marker-mid,那么就在所有中间位置添加marker,
如果一个元素定义了marker-end,那么就在结尾位置添加marker。
可以定义多个,那么也就添加多个。
<svg viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 定义一个箭头标记-->
<marker id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="16"
markerHeight="6"
markerUnits="strokeWidth"
preserveAspectRatio="none"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<!-- 定义一个点标记 -->
<marker id="dot"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="5"
markerHeight="5">
<circle cx="5"
cy="5"
r="5"
fill="red" />
</marker>
</defs>
<!-- 在开头和结尾位置添加 marker,开头为10,10 结尾为90,90 -->
<polyline points="10,10 10,90 90,90"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<!-- 在开头,结尾和中间 位置添加 marker,开头为15,80 结尾为85,15,其余全为中间 -->
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15"
fill="none"
stroke="grey"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>
7、symbol
定义一个模板元素,本身是不会呈现的,只有使用use引用后,才会呈现出来。
<svg viewBox="0 0 100 100"
width="300"
height="300"
xmlns="http://www.w3.org/2000/svg">
<!-- symbol definition NEVER draw -->
<symbol id="sym01"
viewBox="0 0 150 110">
<circle cx="50"
cy="50"
r="40"
stroke-width="8"
stroke="red"
fill="red" />
<circle cx="90"
cy="60"
r="40"
stroke-width="8"
stroke="green"
fill="white" />
</symbol>
<!-- actual drawing by "use" element -->
<use xlink:href="#sym01"
x="0"
y="0"
width="100"
height="50" />
</svg>
只呈现出来了use元素,symbol元素本身没有呈现。
8、svg
svg所定义的片段, 不管在独立的svg文件中,还是嵌入html中,都拥有独立的视口和坐标系统。
<svg xmlns="http://www.w3.org/2000/svg"
width="150"
height="100"
viewBox="0 0 3 2">
<rect width="1"
height="2"
x="0"
fill="#008d46" />
<rect width="1"
height="2"
x="1"
fill="#ffffff" />
<rect width="1"
height="2"
x="2"
fill="#d2232c" />
</svg>
上面的svg为一幅 意大利国旗
svg元素有如下专有属性:
- version:指明 SVG 文档遵循规范, 值为1.0 | 1.1
- x:起始 横坐标
- y:起始 纵坐标
- width:svg元素的宽度
- height:svg元素的高度
- preserveAspectRatio:是否强制进行统一缩放.
- viewBox:允许指定一个给定的一组图形伸展以适应特定的容器元素。
六、视口 viewbox
viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height
下面的不设置 viewbox的情形:
<svg x="0" y="0" width="500" height="60"
xmlns="http://www.w3.org/2000/svg">
<rect x="0"
y="0"
width="100"
height="150" />
</svg>
矩形起始于 svg的(0,0)位置,长度为100px,宽度为150px
当设置viewbo后
<svg viewBox="-5 -5 100 150" width="500" height="600"
xmlns="http://www.w3.org/2000/svg">
<rect x="0"
y="0"
width="100"
height="150" />
</svg>
可以看到,不仅变大了,而且还向右下角 平移了。
为什么呢?
我们可以看到 viewBox的值为"-5 -5 100 150",(-5 -5)分别表示 最小的x和最小的y,也就是说,左上角原本的(0,0)现在等价于(-5,-5), 那么如果想要时rect 还是在原来的左上角,那么<rect x="-5" y="-5" width="100" height="150" />才可以,而如果设置为
<rect x="0" y="0" width="100" height="150" />就会向右向下平移5px。
然后我们看到viewbox后两个是100 150,分别表示 svg的宽度和高度,即100等同于svg定义的宽度500,150等同于svg定义的高度600,那么在svg容器里面的rect 上设置 width为100,等同于500,高为150,等同于600,这样会有个问题,就是本来rect的长宽比为100:150,而通过viewbox设置后,长宽比会变化, 所以svg默认 即使viewbox宽度比变化了,但是viewbox容器里的元素的长宽比不会变化,会以缩放较小的那个为准。
所以我们可以看到 viewbox相当于 一个比例尺,对原本的svg的位置和宽高 做了相同比例的缩放。
一共有下面的5个元素可以设置 viewbox:
<marker>, <pattern>, <svg>, <symbol>, 和 <view>
与viewbox相关的另一个属性是preserveAspectRatio。
如果说viewbox是控制容器里面元素等比缩放的比例尺的话, preserveAspectRatio就是用来指定 是否需要等比缩放,如果不等比缩放,是否需要整个填充。
preserveAspectRatio:<align> [<meetOrSlice>]
除了 <image> 元素之外,其他元素使用preserveAspectRatio必须在同一元素上为 viewBox 提供的值。如果没有提供属性 viewBox ,则忽略了preserveAspectRatio。
七、渐变
分为线形渐变和径向渐变,渐变本身不会渲染,必须通过具体元素的fill引用才生效
<svg width="500"
height="600"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%">
<!--x1,y1 x2,y2用来定义径向渐变的方向,此处为向右-->
<stop offset="0%"
stop-color="blue" />
<stop offset="100%"
stop-color="red" />
</linearGradient>
<radialGradient id="irisGradient">
<stop offset="25%"
stop-color="green" />
<stop offset="100%"
stop-color="dodgerblue" />
</radialGradient>
</defs>
<rect fill="url(#myGradient)"
x1="10"
y1="10"
width="300"
height="100" />
</svg>
八、滤镜
<feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow>, <feFlood>,<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>,<feGaussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>
比较复杂,用的也比较少,使用时可以查找文档
svg 滤镜
九、动画和交互性
动画被弃用,请使用css animations或者web animations代替
十、事件
最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="120" height="120" viewBox="0 0 120 120"
version="1.1">
<polygon points="60,30 90,90 30,90" id="svg_polygon">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite"/>
</polygon>
</svg>
<script>
//svg_hexagon为path的id
document.getElementById("svg_polygon").addEventListener("click", function() {
//todo
});
</script>
十一、svg的css样式
由于在html中,有a元素,所以这就导致了,在css中,使用a时,无法判断是获取的html的a,还是svg的a,所以 最好的方式是使用命名空间,来限定。
<svg width="300"
height="300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- A link around a shape -->
<a href="/docs/Web/SVG/Element/circle">
<circle cx="50"
class="my-circle"
cy="40"
r="35" />
</a>
<!-- A link around a text -->
<a href="/docs/Web/SVG/Element/text">
<text x="50"
y="90"
text-anchor="middle">
<circle>
</text>
</a>
</svg>
@namespace svg url(http://www.w3.org/2000/svg); //svg为命名名称,可以自定义
//元素选择器
svg|a:link,
svg|a:visited {
cursor: pointer;
}
//表示只对svg下的a的 进行操作
svg|a text,
text svg|a {
fill: blue; /* Even for text, SVG uses fill over color */
text-decoration: underline;
}
svg|a:hover,
svg|a:active {
outline: dotted 1px blue;
}
//class选择器, 此处circle只有svg中才有这个元素,所以可以不用加命名空间
circle.my-circle {
stroke: #006600;
fill: #cc0000;
}
十二、好用的svg库
1、svg.js
svg.js更加接近原生svg语法,可以直观的操作svg。svg.js更快,兼容性好,上手更方便。
2、Snap.svg
Snap.svg更接近jquery的语法,来操作svg。Snap.svg更全,功能丰富。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。