SVG-обводка

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

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

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

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

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

html

<!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>

Try it Yourself »

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

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

html

<!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>

Try it Yourself »

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

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

html

<!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>

Try it Yourself »

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

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

html

<!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>

Try it Yourself »

Практика

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

Свойство stroke используется для задания цвета фигуры SVG.Свойство stroke-width используется для задания ширины обводки фигуры SVG.Свойство stroke-dasharray используется для задания или удаления пунктирных линий на фигуре SVG.Свойство stroke-linecap используется для задания цвета углов на фигуре SVG.Свойство stroke-linejoin используется для задания формы, применяемой к углам путей при их обводке.Свойство stroke-opacity используется для увеличения ширины обводки фигуры SVG.

SVG-обводка ​

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

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

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

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

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

Практика ​

SVG-обводка

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

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

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

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

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

Практика