SVG соединяет две точки линией и автоматически обновляет линию, если точка перемещается

Я хочу соединить две точки (круги) линией:

window.onclick = () => {
    document.getElementById('c2').setAttribute("cx", 150);
}
<svg>
  <circle cx = "10" cy = "10" r = "2" id = "c1" />
  <circle cx = "90" cy = "50" r = "2" id = "c2" />
  <line x1 = "10" y1 = "10" x2 = "90" y2 = "50" stroke = "black" />
</svg><br>
Click here to move a circle.

так что если я изменю центр любого <circle> на setAttribute("cx", 150), то строка автоматически следует новой позиции круга.

Есть ли способ сделать это с помощью <use>? Что-то вроде (псевдокод):

<svg>
  <circle cx = "10" cy = "10" r = "2" id = "c1" />
  <circle cx = "90" cy = "50" r = "2" id = "c2" />
  <use x1=xlink:c1:cx y1=xlink:c1:cy x2=xlink:c2:cx y2=xlink:c2:cy stroke = "black" type = "line" />
</svg>

Цель: я не хочу устанавливать координаты два раза, как в circle, так и в line. Вместо этого я хотел бы установить координаты один раз, и что line использует ссылку на элементы circle.

Примечание. Я прочитал SVG соедините две точки линией, но это не помогло.

Как это сделать @RobertLongson?

Basj 01.04.2022 10:21

при щелчке вы можете установить как cx круга, так и x2 линии на одно и то же значение

enxaneta 01.04.2022 11:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать <marker>, который можно разместить в начале, середине и конце элемента.

window.onclick = () => {
    document.getElementById('l1').setAttribute("x2", 150);
}
<svg viewBox = "0 0 200 100" width = "200">
  <defs>
    <marker id = "circle" viewBox = "0 0 4 4" refX = "2"
      refY = "2" markerWidth = "4" markerHeight = "4">
      <circle cx = "2" cy = "2" r = "2" />
    </marker>
  </defs>
  <line id = "l1" x1 = "10" y1 = "10" x2 = "90" y2 = "50" stroke = "black"
    marker-start = "url(#circle)" marker-end = "url(#circle)"/>
</svg><br>
Click here to move a circle.

Другие вопросы по теме