可伸缩矢量图形（SVG）样式的设置

在设置SVG的样式时候，有很多办法，下面作者就科普一下自己在学习过程中使用的一些方法：

以化一个矩形为例，样式：内部填充为蓝色，边为黄色，边宽为2px，具有圆角

相同部分的代码：

<?xml version="1.0" standalone="no"?> //此svg文件并非是独立的文件，具有外部引用文件，所以属性standalone应该设置为“no”

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">//此svg文件引用的外部文件

<svg width="350" height="200" version="1.1"

xmlns="http://www.w3.org/2000/svg"> // 定义svg大小及版本，及其命名空间（xmlns）

<rect x="20" y="20" rx="40" ry="40" width="300" height="150"

。。。。。。/>

</svg>

下面分别给出设置样式的三种不同方法（用以下代码替换“。。。。。。”）：

第一种：直接设置rect属性

<rect x="20" y="20" rx="40" ry="40" width="300" height="150"

stroke-width="2" fill="blue" stroke="yellow"

stroke-opacity="0.5" fill-opacity="0.5"/>

第二种：同在html文件中设置样式一样，利用style来设置rect样式：

<rect x="20" y="20" rx="40" ry="40" width="300" height="150"

style="stroke-width:2;fill:blue;stroke:yellow;

stroke-opacity:0.5;fill-opacity:0.5"/>

第三种：可以利用rect属性和style结合设置rect样式：

<rect x="20" y="20" rx="40" ry="40" width="300" height="150"

style="stroke-width:2;fill:blue;stroke:yellow"

stroke-opacity="0.5" fill-opacity="0.5"/>