SVG初识

SVG 意为可缩放矢量图形(Scalable Vector Graphics)

个人认为现在svg可能有点过时了,svg的很多功能css3或者canvas都能做到很好的效果,

但是刚刚研究了一下还是看到了一些很实在的写法。

优势:

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

这些优势是官方给出的,对于前端来说优势比较明确的可能是可操作的dom结构

svg一般使用的场景:

1,划一条直线:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200" />
</svg>

2,一个圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

SVG初识

3.椭圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="100" cy="80" rx="200" ry="50" />
</svg>

SVG初识

4,一个五角星

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"/>
</svg>

 5,折线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" />
</svg>

6,路径上文字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text></svg>

SVG初识

 

7,动画文字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(100,100)">
<text x="0" y="0"> It's SVG!
<animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze" />
</text>
</g>
</svg>

 

还有各种滤镜,虚化,动画等等。大部分都是css3动画可以实现的了

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpgpjx.html