标签：声明 直线 set ldo 标准 stroke tee 传统 渐变
使用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绘制折线
<polyline points="x1,y1 x2,y2 x3,y3 ....." stroke="" fill-opacity="0"></polyline>
使用SVG绘制多边形
<polygon points="x1,y1 x2,y2 ...."></polygon>
使用SVG绘制文本
提示：传统的标签不能置于SVG内部！同理，SVG的标签也不能放在其它元素内部！
使用SVG绘制图像
提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真。
<image width="" height="" xlink:href="x.jpg" x="" y=""></image>
使用SVG绘制图像
提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真。
<image width="" height="" xlink:href="x.jpg" x="" y=""></image>
12.如何使用渐变效果
<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>
标签：声明 直线 set ldo 标准 stroke tee 传统 渐变
原文地址：http://www.cnblogs.com/liangfc/p/7375539.html
