files/ru/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 атрибуты
translation_of: Web/SVG/Attribute/stroke
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>

<p>Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — <strong>None</strong>.</p>

<h2 id="Контекст_использования">Контекст использования</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Категория</th>
   <td>Presentation attribute</td>
  </tr>
  <tr>
   <th scope="row">Значения</th>
   <td>
    <p><a href="/en/SVG/Content_type#Paint" title="en/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" 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 с stroke</h3>

<h4 id="Пример_1_Нарисуйте_прямую_зеленую_линию_используя_stroke.">Пример 1: Нарисуйте прямую зеленую линию, используя <strong>stroke</strong>.</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('Example1_Draw_straight_green_line_using_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('Example2_Draw_black_circle_with_blue_border_using_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><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
 <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
</ul>