SVG中如何画线条


SVG中, 有三种方式画线条,分别是,直线元素,折线元素,或多边形元素。

直线Line元素

直线只需的属性X12倍,y1y2就可以画一条从(X1Y1)到(x2y2)的线段。

 

<?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 viewBox = "0 0 200 200" version = "1.1">
    <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" stroke = "black" stroke-width = "3"/>
</svg>

SVG中的Polyline 多点折线

SVG中, ployline表示多条相连的线段。它有一个很重要的属性points, 也就是所有坐标点的序列。 你可以用逗号每个坐标的xy, 然后有空格隔开点和点的坐标。 例如points= “20,20 40,25 60,40 80,120 120,140 200,180”。 注意points=“20 20 40 25 60 40 80 120 120 140 200 180” 和前面的点是一样的意思。 你甚至可以用回车和其他的空白字符来分割他们。 这样做的好处是,你可以用你自己喜欢的方式来使您的源代码更具可读性。 注意,不要使用括号的方式 - “10,10是无效的。 该规则也适用于其他对SVG的数据,Path和Matrix。

 

 

<?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 viewBox = "0 0 200 200" version = "1.1">
    <polyline points = "20,20 40,25 60,40 80,120 120,140 200,180" fill = "none" stroke = "black" stroke-width = "3"/>
</svg>

 

SVG中的Polygon 多边形

多边形元素基本上的折线一样,只是它会自动关闭。

 

<?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 viewBox = "0 0 200 200" version = "1.1">
    <polygon points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill = "green" stroke = "black" stroke-width = "3"/>
</svg>

 

使用SVG中的Transform 旋转图元

前面的元素都比较简单, 下面的例子使用Transform 属性,来改变一下图元的旋转角度。

SVG中, Transform 转换指的几何类变化, 包括 translation (移动), rotation(旋转), scale(缩放), 和skew(歪斜)。 下面的例子,只使用了“rotate(-45 100 100。 这意味着,该矩形是以(100,100为旋转中心, 逆时针旋转45度。 其它的转换属性是, matrix, translate, scale, skewX, 和skewY。 

 

<?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 viewBox = "0 0 200 200" version = "1.1">
    <rect x = "25" y = "50" width = "150" height = "100" fill = "tomato" stroke = "lightgreen" stroke-width = "2" transform = "rotate(-45 100 100)"/>
</svg>

 

上一篇 下一篇

评论



分享