HTML 5におけるSVG 2 D筆画と塗りつぶし

塗りつぶし色-fillプロパティ
このアトリビュートは設定した色でグラフィックの内部を塗りつぶし、簡単に使用して、直接このアトリビュートに色値を割り当てることができます.例を見てみましょう.

   
   
   
   

    
    
    
    
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red" 
    
    
    
    
       fill-opacity="0.5" stroke-opacity="0.8"/> 
   
   
   
   

上の例では、赤い青い辺の矩形を描きました.注意点:
1.fillプロパティが指定されていない場合、デフォルトでは黒の塗りつぶしが使用されます.塗りつぶしを解除するにはnoneに設定する必要があります.
2.塗りつぶしの透明度を設定できます.fill-opacityで、値の範囲は0から1です.
枠線色-strokeプロパティ
上の例ではstrokeプロパティが使用されていますが、このプロパティは設定した値を使用してグラフィックの枠線を描き、使用しても直接的で、色の値を付与すればいいです.注意:
1.strokeプロパティが指定されていない場合、デフォルトではグラフィックボーダーは描画されません.
2.エッジの透明度を設定できます.stroke-opacityです.値の範囲は0から1です.
実際には、エッジの場合はグラフィックの内部よりも少し複雑です.エッジには色のほかに「シェイプ」も定義する必要があります.
線の終点-stroke-linecapプロパティ
このプロパティは、butt、square、roundの3つの値を使用できるセグメント端点のスタイルを定義します.例を見てみましょう.

   
   
   
   

    
    
    
    
<svg width="160" height="140"> 
    
    
    
    
  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> 
    
    
    
    
  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> 
    
    
    
    
  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> 
    
    
    
    
</svg> 
   
   
   
   

このコードは、異なるスタイルの線の終点を使用する3つの線を描きます.
左の図から3つのスタイルの違いがわかりやすい.
線の接続-stroke-linejoinプロパティ
このプロパティは、miter、round、bevelの3つの値を使用できるセグメント接続のスタイルを定義します.例を見てみましょう.

   
   
   
   

    
    
    
    
<svg width="160" height="280"> 
    
    
    
    
  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" 
    
    
    
    
      stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/> 
    
    
    
    
    
    
    
    
    
  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" 
    
    
    
    
      stroke-linecap="round" fill="transparent" stroke-linejoin="round"/> 
    
    
    
    
    
    
    
    
    
  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" 
    
    
    
    
      stroke-linecap="square" fill="transparent" stroke-linejoin="bevel"/> 
    
    
    
    
</svg> 
   
   
   
   

左の図から3つのスタイルの違いがわかりやすいです.
線の虚実-stroke-dasharrayプロパティ
このアトリビュートでは、セグメントにどのような虚実線を使用するかを設定できます.例を見てみましょう.

   
   
   
   

    
    
    
    
<svg width="200" height="150"> 
    
    
    
    
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" 
    
    
    
    
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> 
    
    
    
    
  <path d="M 10 75 L 190 75" stroke="red" 
    
    
    
    
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> 
    
    
    
    
</svg> 
   
   
   
   

このプロパティは、カラムの数を設定しますが、カンマで区切らなければなりません.
属性にはもちろんスペースを含めることができますが、スペースは区切り記号ではありません.各数値
実線分の長さを定義し、それぞれ描画、描画しない順にループします.
左の例では5単位の実線を描き、5単位のスペースを残します.
さらに5単位の実線を描きます...このままずっと.
これらの一般的なプロパティに加えて、次のプロパティを設定できます.
stroke-miterlimit:これはcanvasと同様に、いつ線を引かないか接続するmitter効果を処理します.
stroke-dashoffset:このプロパティは破線を描き始める位置を設定します.
CSSを使用してデータを表示する
HTML 5はDIV+CSSの考え方を強化しているので、展示データの部分はCSS処理に任せることもできます.通常のHTML要素に比べてbackground-colorとborderがfillとstrokeに変換されたにすぎない.他の多くはそれほど悪くない.例を簡単に見てみましょう.

   
   
   
   

    
    
    
    
#MyRect:hover {  
    
    
    
    
   stroke: black;  
    
    
    
    
   fill: blue;  
    
    
    
    
 }  
   
   
   
   

よく知っているかどうかは、こんなに簡単です.