SVGでのパスの使用

テストまでの本によります。

より多くの2つの位置決めポイントを払ってください。

<！DOCTYPE HTML > 
< SVG 幅= '1000' の高さ= '800' バージョン= '1.1'
     のxmlns = 'のhttp：//www.w3.org/2000/svg' > 
    < パスD = "M30,100 L270,300
        M30,100 H270
        M30,100 V300
        M270,300、V100
        M270,300、H30" 
      スタイル= "ストローク：黒; ストローク幅：2;」/>
      
    < パスD = "M30,100 C100,20 190,20 270100
        S400,180 450100" 
      スタイル= "塗りつぶし：白; ストローク：赤; ストローク幅：2;」 />
      
    < 円CX = '100' CY = '20' 、R = '2' /> 
    < 円CX = '190' CY = '20' 、R = '2' /> 
    < 円CX = '270' CY = '100' R = '2' /> 
    < 円CX = '400' CY = '180' 、R = '2' /> 
    < 円CX = '450' CY = '100' 、R = '2' />
    
    < パスD = "M30,100 Q190,20 270100
        T450,100" 
      スタイル= "塗りつぶし：白; ストローク：紫; ストローク幅：2;」 />
      
    < パスD = "M100,500 a200,150 0 1,0 150、-150 Z" 
      スタイル= "フィル：黄色;脳卒中：青、ストローク幅：2;"  />
      
    < テキストX = "200" 、Y = "150" DX = " - 5" DY = "5"  
      のfont-size = "24" 回転= "20" textLength = "100" > 
        I愛< tspanのフィル= "赤" > D3 </ tspanの> 
    </ テキスト>

</ SVG >