Не отображается polyline на странице со свойством points?

Рейтинг: 0Ответов: 1Опубликовано: 20.04.2023
polyline = document.createElement('polyline')
// задаю точки, свойство есть в документации, по факту его нет в браузере.
polyline.points = '0,0 100,100'
// добавляю его во внутрь svg
// по итогу оно есть в разметке, но не отображается на странице и отсутствует свойство points
javascript svg polyline
Источник: Stack Overflow на русском

Ответы

▲ 2

Создание и изменение элементов SVG имеют методы несколько отличающиеся от методов для HTML-элементов.

Для создания SVG-элементов используется метод createElementNS() с указанием пространства имён:

polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');

Манипуляции со свойствами и атрибутами тоже имеют свои особенности и соответствующие методы. Подробную информацию по каждому элементу можно найти в спецификации.

Добавить/изменить количество или координаты точек можно парой способов:

Методы: createSVGPoint() и appendItem()

let polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
let svg = document.querySelector('svg');
svg.appendChild(polyline);

polyline.setAttribute('fill', 'none');
polyline.setAttribute('stroke', 'black');
polyline.setAttribute('stroke-width', '5');

let points = '90,10 10,10 10,90 90,90';
points.split(' ').forEach(el => {
  let point = svg.createSVGPoint();
  let coords = el.split(',')
  point.x = coords[0];
  point.y = coords[1];
  polyline.points.appendItem(point);
})
<svg viewBox="0 0 100 100" style="height: 100px; width: 100px; border: 1px solid red;">
<!-- <polyline fill="none" stroke="black" stroke-width="5" points="90,10 10,10 10,90 90,90"> -->
</svg>

Или чуть сократить, используя атрибут style и деструктурирующее присваивание:

let polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
let svg = document.querySelector('svg');
svg.appendChild(polyline);

polyline.setAttribute('style', 'fill: none; stroke: black; stroke-width: 5');

let points = '90,10 10,10 10,90 90,90';
points.split(' ').forEach(el => {
  let point = svg.createSVGPoint();
  [point.x, point.y] = el.split(',');
  polyline.points.appendItem(point);
})
<svg viewBox="0 0 100 100" style="height: 100px; width: 100px; border: 1px solid red;">
<!-- <polyline style="fill: none; stroke: black; stroke-width: 5" points="90,10 10,10 10,90 90,90"> -->
</svg>

Атрибут points

Если стоит задача только создания элемента с заранее определёнными точками, то проще всего сделать это - добавить соответствующий атрибут:

let polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
let svg = document.querySelector('svg');
svg.appendChild(polyline);

polyline.setAttribute('style', 'fill: none; stroke: black; stroke-width: 5');
polyline.setAttribute('points', '90,10 10,10 10,90 90,90');
<svg viewBox="0 0 100 100" style="height: 100px; width: 100px; border: 1px solid red;">
<!-- <polyline style="fill: none; stroke: black; stroke-width: 5" points="90,10 10,10 10,90 90,90"> -->
</svg>

Добавление точек, в этом случае, представляет простую конкатенацию строк:

let polyline = document.querySelector('polyline');

let points = polyline.getAttribute('points');
points += ' 50,50 75,25';
polyline.setAttribute('points', points);
<svg viewBox="0 0 100 100" style="height: 100px; width: 100px; border: 1px solid red;">
  <polyline style="fill: none; stroke: black; stroke-width: 5" points="90,10 10,10 10,90 90,90">
</svg>

Свойство points

Свойство points представляет из себя следующую структуру (упрощённо):

points: {
  0: { x: 90, y: 10 },
  1: { x: 10, y: 10 },
  2: { x: 10, y: 90 },
  3: { x: 90, y: 90 },
  length: 4,
  numberOfItems: 4
}

Как видим, это объект с числовыми ключами, которые указывают на порядковый номер точки в наборе. В свою очередь, наборы представляют из себя объекты с интуитивно-понятными названиями ключей для представления координат - x и y.

Таким образом, можно получить доступ к свойствам каждой отдельной точки:

let polyline = document.querySelector('polyline');

let points = polyline.points;
points[3].y = 50;
<svg viewBox="0 0 100 100" style="height: 100px; width: 100px; border: 1px solid red;">
  <polyline style="fill: none; stroke: black; stroke-width: 5" points="90,10 10,10 10,90 90,90" />
</svg>

Также, с помощью методов points, можно заменять, добавлять, удалять и менять порядок точек.