創建一個在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>