W3docs
ru
Войти

SVG Line

Элемент SVG <line>: рисуем прямую с x1/y1/x2/y2, задаём stroke, пунктир и стрелки, сравниваем с <path>.

Описание элемента <line>

Элемент SVG <line> рисует одну прямую линию между двумя точками: начальной (x1, y1) и конечной (x2, y2). Используйте его, когда внутри <svg> нужна простая линия-разделитель, ось, соединитель или черта — это самый простой и читаемый способ выразить «линию из точки A в точку B».

Все четыре координатных атрибута по умолчанию равны 0 и принимают как длины в пользовательских единицах (например, 30 или 30px), так и проценты относительно viewport (например, 50%). Таким образом, <line> без атрибутов — это линия нулевой длины в начале координат, которая ничего не отображает.

Поскольку <line> геометрически одномерен, у него нет внутренней области. SVG закрашивает внутреннюю часть фигуры через fill, а её контур — через stroke. У линии нет внутренней части, поэтому атрибут fill игнорируется, и линия будет невидима до тех пор, пока не задан stroke.

Пример элемента SVG <line>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <line x1="50" y1="30" x2="300" y2="300" style="stroke:rgb(8, 112, 177);stroke-width:3" />
    </svg>
  </body>
</html>
Попробуйте сами »

Разберём код выше:

  • Атрибут x1 задаёт начальную координату по оси X.
  • Атрибут y1 задаёт начальную координату по оси Y.
  • Атрибут x2 задаёт конечную координату по оси X.
  • Атрибут y2 задаёт конечную координату по оси Y.

По умолчанию линии рисуются с чёрным обводкой и шириной обводки 1 пиксель. Вы можете настроить это с помощью атрибутов stroke и stroke-width, как показано в примере.

Стилизация линий: пунктир, концы и стрелки

Внешний вид линии полностью управляется свойствами обводки. В примере ниже нарисованы три линии с разным оформлением:

  • stroke-dasharray преобразует сплошную линию в пунктирную или точечную. Значение представляет собой список длин штрихов и промежутков (8 4 означает штрих длиной 8 единиц, за которым следует промежуток в 4 единицы, и так далее).
  • stroke-linecap задаёт форму концов линии — butt (по умолчанию, плоский), round или square.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="160" width="320">
      <!-- Solid line -->
      <line x1="20" y1="30" x2="300" y2="30"
            stroke="rgb(8, 112, 177)" stroke-width="4" />
      <!-- Dashed line -->
      <line x1="20" y1="80" x2="300" y2="80"
            stroke="rgb(8, 112, 177)" stroke-width="4"
            stroke-dasharray="12 6" />
      <!-- Rounded dotted line -->
      <line x1="20" y1="130" x2="300" y2="130"
            stroke="rgb(8, 112, 177)" stroke-width="8"
            stroke-linecap="round" stroke-dasharray="0.1 20" />
    </svg>
  </body>
</html>

Ещё два свойства удобны при работе с линиями:

  • marker-end прикрепляет многократно используемый элемент <marker> (определённый в <defs>) к концу линии — стандартный способ добавить стрелку.
  • vector-effect="non-scaling-stroke" сохраняет постоянную ширину обводки даже при масштабировании SVG, поэтому тонкая линия остаётся тонкой независимо от масштаба.

SVG <line> vs SVG <path>

Элементы SVG <line> и <path> оба рисуют линии, но служат разным целям. Элемент <line> специально предназначен для простых прямых линий и является более семантичным и эффективным для этой задачи. Элемент <path> используется для определения сложных фигур или нескольких соединённых линий и кривых. Хотя <path> тоже может рисовать прямые линии, для базовых прямых отрезков лучше использовать <line>, оставляя <path> для более сложных рисунков.

Одну и ту же прямую линию можно выразить обоими способами. Элемент <line> из первого примера эквивалентен элементу <path>, который перемещается в начальную точку (M50,30) и рисует линию до конечной точки (L300,300):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <!-- These two draw the same line -->
      <line x1="50" y1="30" x2="300" y2="300"
            stroke="rgb(8, 112, 177)" stroke-width="3" />
      <path d="M50,30 L300,300"
            stroke="rgb(255, 159, 0)" stroke-width="3" />
    </svg>
  </body>
</html>

Версия с <path> многословнее для одного отрезка — именно поэтому и существует <line>. Если вам нужны несколько прямых отрезков, соединённых конец в конец, используйте <polyline> вместо стека множества элементов <line>.

Элемент SVG <line> также поддерживает глобальные атрибуты и атрибуты событий.

Практика

Практика
Какой набор атрибутов определяет две конечные точки линии SVG?
Какой набор атрибутов определяет две конечные точки линии SVG?
Was this page helpful?