SVG 形状之---线段

 

<line> 标签

<line> 标签用来创建线条。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>

属性名称	属性意义	备注
x1	起点x坐标
x2	终点x坐标
y1	起点y坐标
y2	终点y坐标
stroke	线条颜色
stroke-width	线条宽度
stroke-opacity	线条透明度	范围：0~1
stroke-dasharray	点线或虚线

 

 

 

 

stroke-dasharray：

属性设置如下

<!--画9个像素，空2个像素，循环-->
<line x1="0" y1="50" x2="100" y2="50" stroke="#000" stroke-width="2"
    stroke-dasharray="9,2"/>
<!--画5个像素空3个像素，画9个像素空2个像素，循环-->
<line x1="0" y1="70" x2="100" y2="70" stroke="#000" stroke-width="2"
    stroke-dasharray="5,3,9,2"/>
<!--画5个像素空3个像素，画9个像素空5个像素，画3个像素空9个像素，循环-->
<line x1="0" y1="90" x2="100" y2="90" stroke="#000" stroke-width="2"
    stroke-dasharray="5,3,9"/>
<!--画5个像素空5个像素，循环-->
<line x1="0" y1="110" x2="100" y2="110" stroke="#000" stroke-width="2"
    stroke-dasharray="5"/>

展现效果如下：