files/ja/web/svg/attribute/stroke/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

---
title: stroke
slug: Web/SVG/Attribute/stroke
tags:
  - SVG
  - SVG Attribute
translation_of: Web/SVG/Attribute/stroke
---
<p>« <a href="/ja/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">&lt;paint&gt;</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">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">&lt;svg height="50" width="300"&gt;
    &lt;path stroke="green" d="M5 20 1215 0" /&gt;
&lt;/svg&gt;</pre>

<p>{{ EmbedLiveSample('例1_stroke_を使用した直線', '300', '50', '', 'Web/SVG/Attribute/stroke') }}</p>

<h4 id="例2_黒丸の枠線として青い_stroke_を使用">例2: 黒丸の枠線として青い stroke を使用</h4>

<pre class="brush: html">&lt;svg height="100" width="100"&gt;
    &lt;circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" /&gt;
&lt;/svg&gt;</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>