[svg翻訳教程]楕円形(ellipse元素)と線(ライン要素)

ライン
まず例を見てください.これは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>

効果は以下の通りです

x 1,y 1は線の始点を定義します.
x 2,y 2定義線の終点
 
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が等しいかは一つの円になります.
楕円の一般的な属性
stoke-width
枠線の幅
 
stoke-dashararay
外枠は曲線で、たとえば 

stroke-dasharray: 10 5;

 
stoke-opacity
枠線の不透明度
 
fill
塗りつぶし色は、塗りつぶしないとfill:noneです.
fill-opacity
塗りつぶした透明度