Question

我需要在svg1中的元素和svg2中的元素之间绘制箭头。除了将两个svg元素放入单个svg之外，还知道如何做到这一点吗？

Answer 1

你可以使用位于其他svgs之上的第三个svg。

定位它，所以第三个svg的边缘正好位于你想要箭头指向的位置，并使用x1，y1，x2，y2坐标线的百分比，所以它位于0％，0％，100％， 100％。

不要忘记将指针事件设置为无，以便仍能与页面进行交互...

＆＃13;

var c1 = document.getElementById("svg1").getBoundingClientRect()
var c2 = document.getElementById("svg2").getBoundingClientRect()

var svg3 = document.getElementById("svg3")

svg3.style.top = c1.top + c1.height / 2
svg3.style.left = c1.left + c1.width / 2

svg3.setAttribute("width", (c2.left + c2.width / 2) - (c1.left + c1.width / 2))
svg3.setAttribute("height", (c2.top + c2.height / 2) - (c1.top + c1.height / 2))

＆＃13;

#svg3 {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
#svg3 line {
  marker-start: url(#arrowStart);
  marker-end: url(#arrowEnd);
  stroke-linecap: butt;
  stroke: blue;
  opacity: 0.5;
  stroke-width: 5;
}

＆＃13;

<svg id="svg1" width="100px" height="100px">
  <circle cx="50" cy="50" r="40" fill="red" />
  <circle cx="50" cy="50" r="5" fill="white" />
</svg>

some text...
<br/>some other text
<svg id="svg2" width="100px" height="100px">
  <circle cx="50" cy="50" r="40" fill="green" />
  <circle cx="50" cy="50" r="5" fill="white" />
</svg>

<svg id="svg3">
  <marker id="arrowStart" viewBox="0 0 10 10" markerWidth="5" markerHeight="5" refX="8" refY="5" orient="auto-start-reverse">
    <polygon points="0,0,10,5,0,10" stroke="none" />
  </marker>
  <marker id="arrowEnd" viewBox="0 0 10 10" markerWidth="5" markerHeight="5" refX="8" refY="5" orient="auto">
    <polygon points="0,0,10,5,0,10" stroke="none" />
  </marker>
  <line x1="0%" y1="0%" x2="100%" y2="100%" />
</svg>

＆＃13;

连接不同SVG中的元素

1 个答案: