[svg翻译教程]椭圆(ellipse元素)和线(line元素)

line

先看个例子,这是svg中最简单的线

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <line x1="0"  y1="10" x2="0"   y2="100" style="stroke:#006600;"/>
        <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
        <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"/>
        <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"/>
</svg>

效果如下

[svg翻译教程]椭圆(ellipse元素)和线(line元素)

x1,y1 定义 线条的起点

x2,y2 定义 线的终点

 

ellipse

先看看椭圆的例子

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <ellipse cx="40" cy="40" rx="30" ry="15"
           style="stroke:#006600; fill:#00cc00"/>

</svg>

 

和圆一样,椭圆的圆心被定为在cx,cy

圆角在x方向和y方向有两个值,rx,ry 如何rx和ry相等的就会变成一个圆

椭圆的常见属性

stroke-width

边框的宽度

 

stroke-dasharray

边框为曲线 例如 

stroke-dasharray: 10 5;

 

stroke-opacity

边框的透明度

 

fill

填充颜色,不填充就是fill:none

fill-opacity

填充的透明度

test
上一篇:Kubernetes应用部署模型原理解析


下一篇:三目运算符的小问题