W3docs
ru
Войти

SVG-обводка

SVG offers different stroke properties that can be applied to any kind of text, lines and outlines of elements. See some of the stroke properties in use.

Описание свойств обводки

SVG предоставляет различные свойства обводки, которые можно применять к любому тексту, линиям и контурам элементов. Они позволяют управлять различными аспектами обводки. Вот некоторые свойства обводки:

  • stroke для задания цвета линии, контура или текста элемента,
  • stroke-linecap для задания способа отображения концов линии SVG,
  • stroke-width для задания толщины линии, контура или текста элемента,
  • stroke-dasharray для задания пунктирных линий.

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100" >
      <g fill="none">
        <path stroke="purple" d="M5 30 l215 0" />
        <path stroke="lightgreen" d="M5 60 l215 0" />
        <path stroke="pink" d="M5 90 l215 0" />
      </g>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>
Попробуйте сами »

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightblue" stroke-width="10">
        <path stroke-linecap="butt" d="M5 30 l215 0" />
        <path stroke-linecap="round" d="M5 60 l215 0" />
        <path stroke-linecap="square" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>
Попробуйте сами »

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightgreen">
        <path stroke-width="3" d="M5 30 l215 0" />
        <path stroke-width="5" d="M5 60 l215 0" />
        <path stroke-width="7" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>
Попробуйте сами »

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="orange" stroke-width="5">
        <path stroke-dasharray="3,5" d="M5 30 l215 0" />
        <path stroke-dasharray="12,12" d="M5 60 l215 0" />
        <path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>
Попробуйте сами »

Практика

Практика

Какие из следующих утверждений верны относительно обводки SVG в HTML?