SVG- как определить опорные / опорные точки

Можно ли определить какую-то опорную / опорную точку внутри SVG? В идеале как атрибут, возможно пользовательский, поскольку я не нашел встроенного. Возможное применение такого атрибута было бы очень похоже на применение text-anchor: text-anchor

Моя главная цель - иметь возможность разместить один SVG поверх другого, точно так же, как разместить текст в определенной точке SVG. Идея состоит в том, что якоря каждого SVG должны совпадать внутри глобальной системы координации для простоты).

Спасибо за любую информацию!

Подобный вопрос: трансформировать-переводить

Источник

1 ответ

Ниже приведена недавно созданная мной функция, которая может оказаться полезной в этой ситуации. Он создает 8 равномерно расположенных опорных точек вокруг прямоугольника и отображает их по клику. Координаты точки привязки задаются вручную, но их можно легко добавить с помощью формулы.

      <!DOCTYPE html>
<html>
  <head>
    <title>SVG Rectangle with Anchor Points</title>
  </head>
  <body>
<svg id="svg" width="400" height="400" viewBox="0 0 400 400"></svg>

    <script>
// create the SVG element
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "400");
svg.setAttribute("height", "400");
document.body.appendChild(svg);

// create the rectangle
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", "50");
rect.setAttribute("y", "50");
rect.setAttribute("width", "300");
rect.setAttribute("height", "300");
rect.setAttribute("fill", "transparent");
rect.setAttribute("stroke", "black");
svg.appendChild(rect);

// create the anchor points
var anchorRadius = 5;
var anchorCoords = [
  {x: 50, y: 50}, // top-left corner
  {x: 200, y: 50}, // top edge midpoint
  {x: 350, y: 50}, // top-right corner
  {x: 350, y: 200}, // right edge midpoint
  {x: 350, y: 350}, // bottom-right corner
  {x: 200, y: 350}, // bottom edge midpoint
  {x: 50, y: 350}, // bottom-left corner
  {x: 50, y: 200}, // left edge midpoint
];


for (var i = 0; i < anchorCoords.length; i++) {
  var anchor = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  anchor.setAttribute("cx", anchorCoords[i].x);
  anchor.setAttribute("cy", anchorCoords[i].y);
  anchor.setAttribute("r", anchorRadius);
  anchor.setAttribute("fill", "blue");
  anchor.setAttribute("opacity", "0");
  svg.appendChild(anchor);
}

// add click event to the SVG element to show/hide the anchor points
svg.addEventListener("click", function(event) {
  if (event.target === rect) {
    var anchors = svg.getElementsByTagName("circle");
    for (var i = 0; i < anchors.length; i++) {
      if (anchors[i].getAttribute("opacity") == "0") {
        anchors[i].setAttribute("opacity", "1");
      } else {
        anchors[i].setAttribute("opacity", "0");
      }
    }
  }
});

    </script>
  </body>
</html>
Источник
Другие вопросы по тегам