--- title: stroke slug: Web/SVG/Attribute/stroke tags: - SVG - SVG Attribute translation_of: Web/SVG/Attribute/stroke --- <p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <p><code>stroke</code>属性は与えられた図形要素の外側に描画される色を定義します。<code>stroke</code>属性のデフォルト値は <strong>none</strong> です<strong>.</strong></p> <h2 id="使用可能な場所">使用可能な場所</h2> <table class="standard-table"> <tbody> <tr> <th scope="row">カテゴリ</th> <td>プレゼンテーション属性</td> </tr> <tr> <th scope="row">値</th> <td> <p><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a>, <code>context-fill</code>, <code>context-stroke</code></p> </td> </tr> <tr> <th scope="row">アニメーション</th> <td>可</td> </tr> <tr> <th scope="row">標準文書</th> <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> <h2 id="例">例</h2> <h3 id="SVG_Line" name="SVG_Line">SVG Line with stroke</h3> <h4 id="例1_stroke_を使用した直線">例1: stroke を使用した直線</h4> <pre class="brush: html"><svg height="50" width="300"> <path stroke="green" d="M5 20 1215 0" /> </svg></pre> <p>{{ EmbedLiveSample('例1_stroke_を使用した直線', '300', '50', '', 'Web/SVG/Attribute/stroke') }}</p> <h4 id="例2_黒丸の枠線として青い_stroke_を使用">例2: 黒丸の枠線として青い stroke を使用</h4> <pre class="brush: html"><svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" /> </svg></pre> <p>{{ EmbedLiveSample('例2_黒丸の枠線として青い_stroke_を使用', '100', '120', '', 'Web/SVG/Attribute/stroke') }}</p> <h2 id="context-stroke_を使用する"><code>context-stroke</code> を使用する</h2> <p>非標準かつ機能が制限された<code>context-stroke</code> (および<code>context-fill</code>) については {{cssxref("-moz-context-properties")}} プロパティを参照して下さい。</p> <h2 id="要素">要素</h2> <p>以下の要素で<code>stroke</code>属性を使用できます。</p> <ul> <li>{{SVGElement("shape")}}</li> <li>{{SVGElement("TextContent")}}</li> </ul>