Question

我是一个新的svg。我想以编程方式找到svg图像中心，同时也会显示一个＆＃39;点＆＃39;在中心点。

这里我创建了一个简单的svg。如何在中心点显示点。

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="400">
  <path d="M75 0 L56 105 L225 200 Z" />

</svg>
</body>
</html>

Answer 1

你需要做......

<script type="text/javascript">

  var svg   = document.querySelector("svg");
  var svgns = "http://www.w3.org/2000/svg";

  // get the center
  var el = document.querySelector("path");
  var bbox = el.getBBox();
  var center = {
     x: bbox.left + bbox.width/2,
     y: bbox.top  + bbox.height/2
  };

  // create the dot
  var dot = document.createElementNS(svgns, circle);
  dot.setAttribute("cx", center.x);
  dot.setAttribute("cy", center.y);
  dot.setAttribute("r", 10);
  svg.appendChild(dot);

</script>

找到svg图像中心

1 个答案: