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

Question

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

我尝试以下选项：

<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>