创建一个在SVG中建模的元素

Question

我想创建一个在SVG上建模的 HTML元素。

我尝试了以下选项：

<object>：标签正在运行但导致svg动画出现问题。 （你不能在不产生错误的情况下移动项目）

<svg>：标签不允许我在里面添加其他元素，这迫使我去做。

background-image: url (path);不允许建模，只是将svg的图像放在后台。该模型不适用，当用户点击未绘制的边缘时，用户激活“onclick”。

有一些东西可以在SVG上建立一个标签，如果我们点击Div的“方形”但是在圆形上，事件“onclick”不会触发？

这是一个总结情况的小图

实际上，你会理解它不是我想要设置的圆形模型，它是一种标签菜单，这是一个概述：

我使用JQUERYUI来处理标签移动，标签会导致无法使用的错误。

可以实现此功能的虚构代码我希望它存在

<div model="https://example.com/model.svg">
    <span>A untitled tab</span>
</div>

Answer 1

SVG文档中的链接元素

如果我理解你，你想要一个可点击的svg标签吗？

.menu-link polygon {
  fill: #222;
  stroke: #66e;
}

.menu-link:hover polygon {
  fill: #eee;
  stroke: #88f;
}
.menu-link:hover text {
  fill: #222;
}

<svg viewBox="0 0 100 50">
  <a class="menu-link" href="#">
    <polygon points=" 15,15 20,5 40,5 45,15 15,15"></polygon>
    <text x="20" y="12" fill="white" font-size="0.35em">Text here</text>
  </a>
  <a class="menu-link" href="#">
    <polygon fill="#222" stroke="pink" points=" 50,15 55,5 80,5 85,15 55,15"></polygon>
    <text x="56" y="12" fill="white" font-size="0.35em">Other text</text>
  </a>
</svg>