2

Is it possible to define some kind of anchor/reference point inside an SVG? Ideally as an attribute, probably custom, as I haven't found some built in. A possible application of such an attribute would be very similar to the one of text-anchor: text-anchor

My main purpose is to be able to place one SVG on top of another, just like placing text at a specific point of an SVG. The idea is that the anchors of each SVG should match inside a global co-ordination system for simplicity).

Thanks for any info!

similar question: transform-translate

ioandr
  • 41
  • 2
  • 5
  • 1
    Not sure what you mean. You can place any element at a specific position. SVG has a global co-ordinate system by default (you can create local ones via or elements). – Robert Longson Oct 27 '16 at 01:47
  • Do you mean like the equivalent of a transform origin? – Chris W. Oct 27 '16 at 02:56
  • @RobertLongson yes i know i can place them manually in any position - the problem is to do it more "automatically", e.g. place SVG1 on SVG2, so that their anchors match, without specifying any co-ordinates by hand – ioandr Oct 27 '16 at 09:44
  • @ChrisW. yes, just like you have an anchor point around which you can rotate your svg – ioandr Oct 27 '16 at 09:46
  • 1
    SVG does not have anything like HTML's position relative/fixed. Basically everything is absolutely positioned. You'd could always implement something in javascript to manage positioning. – Robert Longson Oct 27 '16 at 09:58

1 Answers1

0

Below is a function I recently created that might be useful in this situation. It creates 8 evenly spaced anchor points around a rectangle and displays them on click. The anchor point coordinates are manually set, but could easily be added through a formula.

<!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>
Bill Fiore
  • 11
  • 3