[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>

效果以下

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

填充的透明度