SVG相关知识点总结

HTML5新特性之五——SVG绘图

 

	Canvas绘图	SVG绘图
绘图类型	位图	矢量图
缩放	失真	不失真
颜色细节	丰富	不够丰富
应用领域	照片、游戏	统计图、图标、地图
内容	JS绘制	每个图形都是标签
事件绑定	不方便	方便

 

 

 

Scalable Vector Graphiph，可缩放的矢量图，此技术在2000年就已经存在了，独立于网页的一门技术；HTML5之后，纳入了HTML5标准标签库，并进行了一定的瘦身。

 

SVG技术的使用方法：

 

(1)HTML5之前的使用方法：

 

  SVG标签不属于HTML4或XHTML标签，只能编写在独立的XML文件中，首先编写一个SVG文件（本质是一个XML文件），然后在HTML中使用IMG/IFRAME/OBJECT/EMBED等标签引入.svg文件

 

(2)HTML5之后的使用方法——H5已经把SVG标签采纳：

 

  在HTML文件中直接使用SVG相关标签即可

 

<svg>默认为300*150的inline-block</svg>

使用SVG绘制矩形

<rect width="" height="" x="" y="" fill="" fill-opacity="" stroke="" stroke-width="" stroke-opacity=""></rect>

  注意：

(1)SVG图形的样式可以用HTML属性赋值，也可以使用CSS形式，但不接受普通的CSS属性！只能使用SVG元素的专有样式属性。

  (2)SVG图形的属性不属于HTMLDOM标准，只能使用核心DOM方法操作其属性：rect.setAttribute('','')

  (3)使用JS动态创建SVG元素，1)用svg.innerHTML ='' 2)用document.createElementNS('', '')，不能使用document.createElement()

  (4)SVG元素的nodeName都是纯小写形式！与普通的HTML元素不同！

使用SVG绘制圆形

<circle r="" cx="" cy=""></circle>

使用SVG绘制椭圆

<ellipse rx="" ry="" cx="" cy=""></ellipse>

 

使用SVG绘制直线

<line x1="" y1="" x2="" y2="" stroke=""></line>

  注意：所有的SVG图形默认只有填充色，没有描边色。

使用SVG绘制折线

<polyline points="x1,y1  x2,y2  x3,y3  ....."  stroke="" fill-opacity="0"></polyline>

使用SVG绘制多边形                   

<polygon points="x1,y1  x2,y2  ...."></polygon>

使用SVG绘制文本

  提示：传统的标签不能置于SVG内部！同理，SVG的标签也不能放在其它元素内部！

<text x="" y="" font-size="" alignment-baseline="before-edge">文本内容</text>

 使用SVG绘制图像

  提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真。

<image width="" height="" xlink:href="x.jpg" x="" y=""></image>

 

如何使用渐变效果

<svg width="600" height="400" id="svg15">

<!--渐变属于特效，必须声明在“特效列表”-->

<defs>

<linearGradient id="g1" x1="0" y1="0" x2="100%" y2="0">

<stop offset="0" stop-color="#f00"></stop>

<stop offset="100%" stop-color="#0f0"></stop>

</linearGradient>

</defs>

 

<rect fill="url(#g1)"></rect>

</svg>