SVGチュートリアル

SVG要素

SVGfill属性 SVG CSSスタイル

SVGstroke属性

stroke属性は、指定された図形要素の外枠の色を定義します。デフォルト値はnoneです。

　よく使われる属性には：

stroke-width
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-dasharray + stroke-dashoffset
stroke-opacity

スタイル属性

CSSスタイルstyleのstrokeとfillはSVG形状の内部属性を指定します。これは例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<circle　cx="50"　cy="50"　r="50"　style="stroke:　#000066;　fill:　3333ff;"　/>
</svg>

テストをしてみる‹/›

この例では、深い青色の線の色と少し薄い青色の塗り分け色を持つ円を定義しています。

Strokeの例

SVG形状の線は形状の輪郭です。これはSVGの線の例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

テストをしてみる‹/›

この例では、黒色（#000000）の線の色で塗り分けがない円を定義しています。実行後の画像効果：

描边と塗り分け(Stroke & Fill)の例

SVGの線と塗り分け色を組み合わせてSVG形状を作成できます。これはSVGの線と塗り分けの例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>

テストをしてみる‹/›

この例では、深い青色（#000066）線の色と少し薄い青色（#3333ff）塗り分け色の円です。実行後の画像効果：

stroke-width

SVGはstroke-widthは線の幅を定義するCSS属性です。これはSVGのstroke-width例：

例

stroke-width:　3px;

この例では、線の幅を3ピクセルです。他の単位を使用することもできます。以下のSVG座標系の単位ですべての利用可能な単位を確認できます。

ここには4つの異なる例がありますstroke-width：

例

<svg　width="500"　height="120">
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　1px;"　/>
<circle　cx="150"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　3px;"　/>
<circle　cx="250"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　6px;"　/>
<circle　cx="350"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　12px;"　/>
</svg>

テストをしてみる‹/›

実行後の画像効果：

描边線帽(stroke-linecap)

SVG CSS属性　stroke-linecapはSVGの線の端がどのように表示されるかを定義します。CSS属性stroke-linecapには3つの可能な値があります。これらは：

butt
square
round

この値はbuttが線キャップを生成し、この線キャップは線の端に正確に切断されます。この値はsquareは線キャップがbutt（切断）のように見えますが、少し線の終点を超えます。この値はroundは線の上限に線キャップを生成します。

ここには3つのSVG　stroke-linecapはこれら3つの例を示しています　stroke-linecapの値（シーケンス=butt、square、round）:

本例では、a　stroke-widthが10で描かれ、stroke-linecapCSS属性の効果が見られます。緑色の線の内、黒色の線をstroke-widthの1この線は同じx1, y1およびx2, y2緑色の線の座標が示されていますが、stroke-linecapのセットです。このようにして、異なるstroke-linecapの値の違いです。

線の接続（stroke-linejoin)

このCSS属性stroke-linejoinは、形状の2つの線の間の接続がどのようにレンダリングされるかを定義します。CSS属性stroke-linejoinが3つの値のうちの1つを取ることができます。これらの値は：

miter
round
bevel

これは3つのSVG　stroke-linejoinの例です。これらの異なる値を説明しています：

例

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　miter;"　></path>
<text　x="22"　y="20">miter</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　round;"　></path>
<text　x="122"　y="20">round</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　bevel;"　></path>
<text　x="222"　y="20">bevel</text>
</svg>

テストをしてみる‹/›

stroke-miterlimit

styleのstroke-miterlimit属性とstroke-linejoinと一緒に使用されます。stroke-linejoinが斜接に設定されている場合、stroke-miterlimitは、2つの線が交差する点（線角（角）の延長）の距離を制限するために使用できます。

これはSVGのstrokeです-miterlimitの例：

例

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-miterlimit:　1.0;
　　　　　　　　　　　　　"　></path>
<text　x="29"　y="20">1.0</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-miterlimit:　2.0;
　　　　　　　　　　　　　"　></path>
<text　x="129"　y="20">2.0</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-miterlimit:　4.0;
　　　　　　　　　　　　　"　></path>
<text　x="229"　y="20">4.0</text>
</svg>

テストをしてみる‹/›

注意してくださいstroke-miterlimit、3つのパスが3つの異なる値を使用する場合、見た目はほぼ同じです。実行後の画像効果：

線接続の長さは斜接長さと呼ばれます。斜接長さは接続線の内角から接続線の先端までの距離を測定します。この画像では、斜接長さは接続線の先端に赤色で描かれ、接続線の右側に再度表示されています：

行程が広いほど、接続線間の角度が大きくなり、斜接時間が長くなることは想像に難くありません。

stroke-miterlimitは実際には斜接長さと筆跡幅の比率の上限を設定しています。したがって、stroke-miterlimitの1.0は斜接の長さが最大1 xの筆跡幅。斜接がこの範囲を超えると、斜接が切られます。1.0はstroke-miterlimitの最小可能値です。

以下は1以下はmiterlimitの最小可能値を使用した例です。-.0as　stroke

角度が大きい場合、斜接が大きくなるのは、鋭い角度が自然と長い斜接を生じさせるからです。miterlimitの値の例ですが、接続線の角度が異なります：

stroke-dasharray + stroke-dashoffset

SVG CSS属性　stroke-dasharrayは虚線で描かれたSVG形状の筆跡を描きます。これが「破折号配列」と呼ばれるのは、数値の配列を値として提供するからです。これらの値は破折号とスペースの長さを定義します。したがって、偶数個の数字を提供する必要があります。

これはSVGのstrokeです-dasharrayの例：

例

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;　　　　　　stroke-dasharray:　10　5"　　/>
</svg>

テストをしてみる‹/›

この例では虚線を持つ筆跡を定義しています。虚線部分の幅が10ピクセル、虚線の間隔が5ピクセル。実行後の画像効果：

以下は異なる破折号とスペースの幅を持つ例です：

例

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　5"　　></line>
<line　x1="20"　y1="40"　x2="120"　y2="40"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　10"　　></line>
</svg>

テストをしてみる‹/›

第一行は10の虚線の幅から始め、次に5ピクセルの間隔、次に5ピクセルの虚線、次に5ピクセルの間隔で繰り返します。

第二行は虚線の幅で10から始め、次に5ピクセルの間隔、次に5ピクセルの虚線、最後に10ピクセルの間隔です。

実行後の画像効果：

stroke-dashoffsetは虚線モードのスタート位置を設定します。これにより、パターンの中間から始めたり、そこからパターンを繰り返したりすることができます。これはSVGのstroke-dashoffsetの例：

例

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="170"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5;　　　　　　stroke-dashoffset:　5;
　　　　　　"　　/>
</svg>

テストをしてみる‹/›

この例ではdashを設定しています-offsetが5ピクセル、これは虚線のレンダリングが5ピクセルで虚線モードに入ります（すべてのブラウザが完全にサポートしていない機能ではありません）。実行後の画像効果：

stroke-opacity

SVG CSS属性stroke-opacityはSVG形状の輪郭の不透明度を定義するために使用されます.stroke-opacityが0から1の十進数が0に近いほど、透明度が高くなります。この値が1、筆跡はより不透明になります。デフォルトのstroke-opacityの値が1、完全に不透明な筆跡を表します。

これはSVGのstrokeです-opacityの例です。異なるstrokeを持つ三行が表示されています-opacityテキストの上の行　：

例

<svg　width="500"　height="120">
　　　　<text　x="22"　y="40">Text　Behind　Shape</text>
　　　　<path　d="M20,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.3;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M80,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.7;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M140,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　1;
　　　　　　　　　　　　　　　　　"　></path>
</svg>

テストをしてみる‹/›

これは生成された画像です。後ろのテキストが次第に見えにくくなることに注意してください。

SVGfill属性 SVG CSSスタイル