---
title: stroke-linecap
slug: Web/SVG/Attribute/stroke-linecap
translation_of: Web/SVG/Attribute/stroke-linecap
---
<div>{{SVGRef}}</div>

<p>Атрибут <strong><code>stroke-linecap</code></strong> - это атрибут представления, определяющий форму, которая будет использоваться в конце открытых подпутей при штриховании.</p>

<p class="note"><strong>Сноска: </strong>В качестве атрибута представления можно использовать <code>stroke-linecap</code> в качестве свойства CSS.</p>

<p>В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>

<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;!-- Effect of the (default) "butt" value --&gt;
  &lt;line x1="1" y1="1" x2="5" y2="1" stroke="black"
        stroke-linecap="butt" /&gt;

  &lt;!-- Effect of the "round" value --&gt;
  &lt;line x1="1" y1="3" x2="5" y2="3" stroke="black"
        stroke-linecap="round" /&gt;

  &lt;!-- Effect of the "square" value --&gt;
  &lt;line x1="1" y1="5" x2="5" y2="5" stroke="black"
        stroke-linecap="square" /&gt;

  &lt;!--
  the following pink lines highlight the
  position of the path for each stroke
  --&gt;
  &lt;path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>

<h2 id="Нотации">Нотации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td><code>butt</code> | <code>round</code> | <code>square</code></td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><code>butt</code></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h3 id="butt">butt</h3>

<p>Значение <code>butt</code> указывает границу каждого подпути и не выходит за пределы двух его конечных точек. На подпути нулевой длины путь не будет отображаться вообще.</p>

<h4 id="Пример">Пример</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;!-- Effect of the "butt" value --&gt;
  &lt;path d="M1,1 h4" stroke="black"
        stroke-linecap="butt" /&gt;

  &lt;!-- Effect of the "butt" value on a zero length path --&gt;
  &lt;path d="M3,3 h0" stroke="black"
        stroke-linecap="butt" /&gt;


  &lt;!--
  the following pink lines highlight the
  position of the path for each stroke
  --&gt;
  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('butt', '100%', 200)}}</p>

<h3 id="round">round</h3>

<p>Значение <code>round</code> указывает на то, что в конце каждого подпути обводка будет расширена на полукруг с диаметром, равным ширине обводки. На подпути нулевой длины обводка состоит из полного круга с центром в точке подпути.</p>

<h4 id="Пример_2">Пример</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;!-- Effect of the "round" value --&gt;
  &lt;path d="M1,1 h4" stroke="black"
        stroke-linecap="round" /&gt;

  &lt;!-- Effect of the "round" value on a zero length path --&gt;
  &lt;path d="M3,3 h0" stroke="black"
        stroke-linecap="round" /&gt;


  &lt;!--
  the following pink lines highlight the
  position of the path for each stroke
  --&gt;
  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('round', '100%', 200)}}</p>

<h3 id="square">square</h3>

<p>Значение <code>square</code> указывает, что в конце каждого подпути обводка будет расширена прямоугольником с шириной, равной половине ширины обводки, и высотой, равной ширине обводки. На подпути с нулевой длиной обводка состоит из квадрата, ширина которого равна ширине обводки, с центром в точке подпути.</p>

<h4 id="Пример_3">Пример</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;!-- Effect of the "square" value --&gt;
  &lt;path d="M1,1 h4" stroke="black"
        stroke-linecap="square" /&gt;

  &lt;!-- Effect of the "square" value on a zero length path --&gt;
  &lt;path d="M3,3 h0" stroke="black"
        stroke-linecap="square" /&gt;


  &lt;!--
  the following pink lines highlight the
  position of the path for each stroke
  --&gt;
  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('square', '100%', 200)}}</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузера</h2>

<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных.<br>
Если вы хотите внести свой вклад в данные, пожалуйста, проверьте  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на их получение.</div>

<p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</p>

<h2 id="Спецификация">Спецификация</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Коммент</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>Definition for shapes and texts</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition for shapes and texts</td>
  </tr>
 </tbody>
</table>