Свойство CSS stroke-dasharray

Свойство stroke-dasharray управляет шаблоном штрихов и промежутков, используемых для формирования обводки пути.

Свойство stroke-dasharray имеет два значения: none и <dasharray>.

<dasharray> — это список длин или процентов, разделённых запятыми и/или пробелами. Каждое значение задаёт длину вдоль пути, на которой обводка является штрихом или промежутком.

Встроенные стили CSS переопределяют презентационные атрибуты SVG. Например, встроенный стиль stroke-dasharray: 4; будет иметь приоритет над презентационным атрибутом stroke-dasharray="4".

INFO

Свойство stroke-dasharray можно использовать и как свойство CSS, и как презентационный атрибут SVG. Его можно применять к любому элементу, но оно влияет только на следующие элементы: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> и <tspan>.

Initial Value	none
Applies to	Shapes and text content elements.
Inherited	Yes.
Animatable	No.
Version	SVG 1.1 Specification
DOM Syntax	Object.strokeDasharray = "none";

Синтаксис

Синтаксис CSS stroke-dasharray

css

stroke-dasharray: none | <dasharray> | initial | inherit;

Пример свойства stroke-dasharray:

Пример кода CSS stroke-dasharray

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dasharray property example</h2>
    <svg height="80" width="300">
      <g fill="none" stroke="black" stroke-width="4">
        <path stroke-dasharray="6,6" d="M5 20 l215 0" />
        <path stroke-dasharray="8,10" d="M5 40 l215 0" />
        <path stroke-dasharray="18,10,6,7,7,10" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>

Try it Yourself »

Результат

CSS stroke-dasharray

Пример свойства stroke-dasharray с элементом `<line>`:

Ещё один пример кода CSS stroke-dasharray

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dasharray property example</h2>
    <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c98c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#8ebf42"
        stroke-dasharray="3" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#000"
        stroke-dasharray="5 1" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#ccc"
        stroke-dasharray="4 2 2" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="4 1 3 2" />
    </svg>
  </body>
</html>

Try it Yourself »

Значения

Value	Description
none	Штрихи не используются.
`<dasharray>`	Используется шаблон штриховки.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Practice

What is the function of the 'stroke-dasharray' property in CSS?

It sets the pattern of dashes and gaps used to stroke paths.It colors the stroke paths.It specifies the width of the stroke path.It modifies the dash sequence pattern by repeating the values.It creates animation effects for stroke paths.

Свойство CSS stroke-dasharray ​

Синтаксис ​

Пример свойства stroke-dasharray: ​

Результат ​

Пример свойства stroke-dasharray с элементом <line>: ​

Значения ​