Свойство stroke SVG

Свойство stroke определяет цвет контура заданного графического элемента. Его значение по умолчанию - none.

　Часто используемые свойства включают:

1. stroke-width

2. stroke-linecap

3. stroke-linejoin

4. stroke-miterlimit

5. stroke-dasharray + stroke-dashoffset

6. stroke-opacity

Стильные свойства

Стиль CSS style stroke и fill определяет внутренние свойства SVG-формы. Вот пример:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<circle　cx="50"　cy="50"　r="50"　style="stroke:　#000066;　fill:　3333ff;"　/>
</svg>

Этот пример определяет круг с глубоким синим цветом контура и светло-синим цветом заливки.

Пример Stroke

Контур SVG-формы - это контур формы. Вот пример SVG-линия:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

Этот пример определяет круг с черным (#000000) цветом контура и без заливки. Эффект изображения после выполнения:

Пример рисования контура и заливки (Stroke & Fill)

Вы можете комбинировать цвет штриховки и заливки SVG в SVG-формы. Вот пример штриховки и заливки SVG:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>

В этом примере определен круг с более глубоким синим цветом контура (#000066) и более светлым синим цветом заливки (#3333ff). Эффект изображения после выполнения:

stroke-width

SVG имеет CSS свойство stroke-width, определяющее ширину контура. Вот пример stroke-width SVG:

stroke-width:　3px;

В этом примере ширина штриховки установлена в 3 пикселя. Вы можете использовать единицы, отличные от пикселей. ВВ единицах системы координат SVG посмотреть все доступные единицы。

Вот четыре различных примера stroke-width:

<svg width="500" height="120">
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　1px;"　/>
<circle　cx="150"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　3px;"　/>
<circle　cx="250"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　6px;"　/>
<circle　cx="350"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　12px;"　/>
</svg>

Эффект изображения после выполнения:

Обрисовка линии-крышки (stroke-linecap)

SVG CSS свойство stroke-linecap определяет, как呈现 конец SVG линии.

butt
square
round

Эта величина создает линию-крышку, которая точно отрезает конец этой линии. Эта величина делает крышку линии看起来像butt (отрезанная), но稍微超出该行的终点。Эта величина создает ограничитель на линии.

Здесь есть три SVG stroke-linecap, которые показывают эти три примера значений stroke-linecap (последовательность = butt, square, round):

Этот пример определяет три зеленые линии, у которых stroke-width равен 10, чтобы лучше объяснить эффект свойства stroke-linecap CSS. Внутри каждой зеленой линии рисуется черная линия с stroke-width 1, которая имеет те же x1, y1 и x2, y2 координаты, что и зеленая линия, но без stroke-linecap. Таким образом, вы можете увидеть различия между различными значениями stroke-linecap.

Соединение линий (stroke-linejoin)

Свойство CSS stroke-linejoin определяет, как соединяются две линии в形状е. Свойство stroke-linejoin может принимать одно из трех значений. Эти значения:

miter
round
bevel

Это три примера SVG stroke-linejoin, которые объясняют эти различные значения:

<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: miter;" ></path>
<text x="22" y="20">miter</text>
<path d="M120,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: round;" ></path>
<text x="122" y="20">round</text>
<path d="M220,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: bevel;" ></path>
<text x="222" y="20">bevel</text>
</svg>

stroke-miterlimit

В стилях stroke-miterlimit свойство используется вместе с stroke-linejoin. Если stroke-linejoin установлено на скос, то stroke-miterlimit можно использовать для ограничения расстояния между точками пересечения двух линий (расширение угла (угол)).

Это пример SVG stroke-miterlimit:

<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter; stroke-miterlimit: 1.0;
　　　　　　　　　　　　　"　></path>
<text x="29" y="20">1.0</text>
<path d="M120,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter; stroke-miterlimit: 2.0;
　　　　　　　　　　　　　"　></path>
<text x="129" y="20">2.0</text>
<path d="M220,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter; stroke-miterlimit: 4.0;
　　　　　　　　　　　　　"　></path>
<text x="229" y="20">4.0</text>
</svg>

Обратите внимание на stroke-miterlimit, как три разных значения используются тремя различными путями, и они выглядят почти одинаково. Эффект изображения после выполнения:

Длина соединения линии называется длиной наклона. Длина наклона измеряется от внутреннего угла соединения до вершины соединения. На этом изображении длина наклона нарисована красным на вершине соединения, и повторяется справа от соединения:

Представьте себе, что чем шире путь, тем больше угол между линиями соединения, и дольше время наклона.

stroke-miterlimit фактически устанавливает верхний предел между длиной наклона и шириной штриха. Таким образом, stroke-miterlimit 1.0 означает, что максимальная длина наклона составляет 1 x ширина штриха. Наклон, выходящий за этот диапазон, не учитывается. 1.0 — минимальное возможное значение stroke-miterlimit.

Вот несколько примеров использования значения stroke-miterlimit 1.0, но углы соединения линии различаются:

Обратите внимание, что при больших углах切除 части наклона становятся больше. Это связано с тем, что острые углы естественно создают более длинные наклоны.

stroke-dasharray + stroke-dashoffset

SVG CSS свойство stroke-dasharray используется для рисования контура SVG формы с пунктирной линией. Название «разделительная строка массива» связано с тем, что вы предоставляете массив чисел в качестве значения. Эти значения определяют длину разделительных строк и пробелов. Поэтому вам следует предоставить четное количество чисел.

Это пример SVG stroke-dasharray:

<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;　　　　　　stroke-dasharray:　10　5"　　/>
</svg>

Этот пример определяет штрих с штриховкой, шириной штриховки 10 пикселей, интервалом между штриховкой 5 пикселей.Эффект изображения после выполнения:

Вот несколько примеров с различной шириной зазоров и пробелов:

<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　5"　　></line>
<line x1="20" y1="40" x2="120" y2="40"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　10"　　></line>
</svg>

Первая строка начинается с штриховки шириной 10, затем 5-пиксельное расстояние, затем 5-пиксельная штриховка, затем 5-пиксельное расстояние.Затем повторяется этот шаблон.

Вторая строка начинается с штриховки шириной 10, затем 5-пиксельное расстояние, затем 5-пиксельная штриховка, затем 10-пиксельное расстояние.

Эффект изображения после выполнения:

stroke-dashoffset используется для установки расстояния, на котором начинается режим штриховки.Таким образом, вы можете начать рисовать по середине узора, например, начать с середины узора, затем повторить узор оттуда.Это пример SVG stroke-dashoffset:

<svg width="500" height="120">
<line x1="20" y1="20" x2="170" y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5;　　　　　　stroke-dashoffset:　5;
　　　　　　"　　/>
</svg>

В этом примере dash-offset установлен на 5 пикселей, что означает, что рендеринг штриховки начнется с 5 пикселей в режиме штриховки (не все браузеры полностью поддерживают эту функцию).Эффект изображения после выполнения:

stroke-opacity

Свойство CSS SVG stroke-opacity используется для определения непрозрачности контура SVG-формы. Значение stroke-opacity, близкое к 0 и 1 в десятичном формате, делает контур более прозрачным. Чем ближе значение к 1, тем менее прозрачен контур.Значением по умолчанию для stroke-opacity является 1, что означает, что контур完全不 прозрачен.

Это пример SVG stroke-opacity, в котором показаны три строки текста с различной stroke-opacity вверху:

<svg width="500" height="120">
　　　　<text　x="22"　y="40">Текст за формой</text>
　　　　<path　d="M20,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.3;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M80,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.7;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M140,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　1;
　　　　　　　　　　　　　　　　　"　></path>
</svg>

Это созданное изображение. Обратите внимание, что текст за формой становится все менее видимым.