线条
------------------------------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="400" height="400">
<desc>Blueidea Strokes</desc>

<circle style="fill:none;stroke:red;stroke-width:5;" cx="100" cy="70" r="50"/>
<circle style="fill:none;stroke:blue;stroke-width:3;stroke-dasharray: 5 5 15 25"
cx="130" cy="180" r="100"/>

</svg>
----------------------------------------------------------------------------------
说明:
在SVG的style属性中,stroke控制线条的颜色,stroke-width控制线条的宽度,stroke-dasharray是用来描述线段和空隙长度的。第1个"5"表示小线段的长度,第2个"5"表示小线段和长线段之间的长度,"15"表示长线段的长度,"25"表示长线段到短线段之间的长度。事实上,可以给上述数字序列再添上几个数字,那么该圆的边框线段和空隙就更多了。


分行显示
-------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="50" height="50">
<text x="0" y="13" style="fill: red">
Line 1
<tspan x="0" dy="0.5cm">Line 2</tspan>
</text>
</svg>
-------------------------------------------------------------------------------------
说明:
在SVG中,可以使用tspan元素使文字分行显示。Tspan元素作用于对文字显示进行单独控制。Tspan元素的dy属性表示一个纵向相对位移值,他作用于区分上下两行文字间的纵向相对位移。如果将dy属性删掉,将会发现line1被line2覆盖而无法显示。
Tspan元素除了dy还有x,y,dx,rotate,textlength等属性。
-------------------------------------------------------------------------------------

posted on 2006-04-27 15:26  帅死活该  阅读(366)  评论(0编辑  收藏  举报