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