---
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"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the (default) "butt" value -->
<line x1="1" y1="1" x2="5" y2="1" stroke="black"
stroke-linecap="butt" />
<!-- Effect of the "round" value -->
<line x1="1" y1="3" x2="5" y2="3" stroke="black"
stroke-linecap="round" />
<!-- Effect of the "square" value -->
<line x1="1" y1="5" x2="5" y2="5" stroke="black"
stroke-linecap="square" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>
</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"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "butt" value -->
<path d="M1,1 h4" stroke="black"
stroke-linecap="butt" />
<!-- Effect of the "butt" value on a zero length path -->
<path d="M3,3 h0" stroke="black"
stroke-linecap="butt" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
</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"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "round" value -->
<path d="M1,1 h4" stroke="black"
stroke-linecap="round" />
<!-- Effect of the "round" value on a zero length path -->
<path d="M3,3 h0" stroke="black"
stroke-linecap="round" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
</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"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "square" value -->
<path d="M1,1 h4" stroke="black"
stroke-linecap="square" />
<!-- Effect of the "square" value on a zero length path -->
<path d="M3,3 h0" stroke="black"
stroke-linecap="square" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
</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>