stroke

<color>

Устанавливает отрисовку обводки с помощью любого допустимого значения цвета CSS.

<image>

Устанавливает отрисовку обводки с помощью того, что SVG называет сервером отрисовки, который в данном контексте представляет собой SVG-градиент или шаблон. CSS-градиенты не могут использоваться со свойством stroke.

context-stroke

Заставляет элемент «унаследовать» определение обводки от своего элемента контекста. Если действительного элемента контекста нет, это значение приведет к отсутствию отрисовки обводки.

stroke = 
  <paint>  

<paint> = 
  none         |
  <image>      |
  <svg-paint>  

<image> = 
  <url>       |
  <gradient>  

<svg-paint> = 
  child               |
  child( <integer> )  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

В этом примере мы создаем две разные фигуры, круг и прямоугольник, которые являются частью <g> (группы), у которой для двух фигур установлен серый цвет обводки по умолчанию.

<svg>
  <g fill="none" stroke="gray" stroke-width="10">
    <circle cx="100" cy="100" r="40" />
    <rect x="20" y="20" width="80" height="80" />
  </g>
</svg>

Затем с помощью CSS мы применяем темно-фиолетовый цвет к прямоугольнику и красный к кругу.

rect {
  stroke: hsl(270deg 50% 40%);
}
circle {
  stroke: red;
}

В этом примере используется та же группа и фигуры (при этом круг немного смещен), что и в предыдущем примере, но также определён SVG-шаблон.

<svg>
  <g fill="none" stroke="gray" stroke-width="23">
    <circle cx="150" cy="90" r="40" />
    <rect x="20" y="20" width="80" height="80" />
  </g>
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>
</svg>

Затем шаблон ссылается в CSS с помощью значения URL, указывающего на ID шаблона. Этот шаблон применяется к обеим фигурам как цвет для обводки, результат показан.

rect,
circle {
  stroke: url(#star);
}

Шаблон рисуется относительно области определения фигур, что может привести к визуальному пересечению при их перекрытии, поскольку части шаблона прозрачны.

Здесь мы снова используем ту же разметку группы и фигур, что и в первом примере, но также добавляем определение SVG-градиента.

<svg>
  <g fill="none" stroke="gray" stroke-width="10">
    <circle cx="100" cy="100" r="40" />
    <rect x="20" y="20" width="80" height="80" />
  </g>
  <defs>
    <linearGradient id="greenwhite">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
</svg>

В CSS мы применяем этот SVG-градиент к прямоугольнику, используя значение URL, указывающее на ID линейного градиента. Кругу мы применяем линейный CSS-градиент, эквивалентный по назначению SVG-градиенту.

rect {
  stroke: url(#greenwhite);
}
circle {
  stroke: linear-gradient(90deg, green, white);
}

Только прямоугольник получает градиентную обводку, в то время как круг использует серый цвет обводки, установленный элементом группы. Это происходит потому, что CSS-градиенты не являются допустимыми значениями для свойства stroke, в то время как ссылки URL на SVG-градиенты разрешены.

В этом случае мы начинаем с элемента группы, внутри которого определены две прямоугольные траектории. После этого определен линейный градиент и SVG-маркер.

<svg>
  <g fill="none" stroke="gray" stroke-width="4">
    <path d="M 20,20 l 180,0 0,100 -180,0 z" />
    <path d="M 100,40 l 180,0 0,100 -180,0 z" />
  </g>
  <defs>
    <linearGradient id="orangered">
      <stop offset="0%" stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    <marker
      id="circle"
      markerWidth="20"
      markerHeight="20"
      refX="10"
      refY="10"
      markerUnits="userSpaceOnUse">
      <circle
        cx="10"
        cy="10"
        r="8"
        stroke-width="4"
        stroke="none"
        fill="none" />
    </marker>
  </defs>
</svg>

Затем мы пишем CSS, чтобы добавить маркер к обеим траекториям, а также установить темно-фиолетовый цвет обводки. Это переопределяется для второй траектории, которой задано значение URL для применения градиента оранжевого в красный как обводку. Наконец, мы устанавливаем значение цвета обводки для элемента круга в элементе маркера в значение context-stroke.

path {
  stroke: hsl(270deg 50% 40%);
  marker: url(#circle);
}
path:nth-of-type(2) {
  stroke: url(#orangered);
}
marker circle {
  stroke: context-stroke;
}

Поскольку stroke-context применяется к элементу, который происходит от элемента <marker>, элементом контекста для каждого круга является элемент, вызвавший элемент <marker>; то есть, элементы <path>. Результатом является то, что маркеры на первой траектории используют цвет вызывающей траектории и имеют фиолетовый цвет. Маркеры на второй траектории, напротив, используют тот же градиент оранжевого в красный SVG, что и траектория. Последний случай иллюстрирует, как SVG-градиенты применяются как один градиент ко всей фигуре, а не независимо к каждой отдельной части фигуры.

• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-opacity
• stroke-width
• paint-order
• SVG stroke атрибут