创建一个以 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>