Créer un élément modélisé en SVG

Question

Je voudrais créer un élément HTML modélisé sur un SVG.

J'ai essayé les options suivantes:

<object>: La balise fonctionne mais est à l'origine des problèmes dans l'animation du svg. (Vous ne pouvez pas déplacer l'article sans générer de bugs)

<svg>: Le tag ne me permet pas d'ajouter d'autres éléments à l'intérieur, ce qui me force à faire.

background-image: url (path); ne permet pas la modélisation mais simplement de mettre l'image du svg en arrière-plan. Le modèle ne s'applique pas et laisse l'utilisateur activé "onclick" lorsqu'il clique sur des bords non dessinés.

Il y aurait quelque chose qui pourrait faire un tag modelé sur le SVG, de sorte que l'événement "onclick" ne se déclenche pas si on clique sur le "carré" de la Div mais sur le rond?

Voici un petit schéma qui résume la situation

Eh bien, en réalité, comme vous le comprendrez n'est pas un modèle rond que je veux mettre en place, il est une sorte de menu de l'onglet, voici un aperçu:

J'utilise jQueryUI pour gérer l'onglet se déplace, et la balise provoque des bugs qui rendent impossible l'utilisation.

Un code imaginaire qui pourrait remplir cette fonction, je voudrais qu'il existe

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

Answer 1

Un élément de liaison dans le document SVG

Si je vous comprends bien, vous voulez un onglet cliquable 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>