Question

我的网站里面有三个SVG。现在我想显示不同svgs中元素之间的连接。

为此，我想从svg1中的element1（＃element1）到svg2中的element6绘制一条简单的行。

不，我不能简单地创建一个带有所有svgs的svg来在svg-object中绘制一条线，因为我有不同的svg1图像（dynmanically加载）和svg2图像。

所以我必须使用干净的html DOM。这可能吗？

Answer 1

就像@hungerstar指出的那样，你可以很容易地做到这一点。除了我更喜欢嵌入式图像之外;

CodePen to tinker

＆＃13;

svg {
  border: red 1px solid;
}
svg line {
  stroke: red;
}

＆＃13;

<svg width="300" height="300" viewBox="0 0 300 300">
  <image width="100" height="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" />
  <image width="100" height="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" x="200" y="200"/>
  <line fill="none" stroke-width="10" stroke-miterlimit="10" x1="50" y1="50" x2="250" y2="250"/>
</svg>

＆＃13;

希望这会有所帮助，欢呼。

HTML：连接到不同SVG的元素

1 个答案: