2017-10-21 56 views
1

Je voudrais créer un élément HTML modélisé sur un SVG.Créer un élément modélisé en 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

enter image description here

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:

enter image description here

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> 

Répondre

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>

+0

C'est exactement ce que je voulais, je vais vérifier si ce n'est pas un problème avec jQueryUI, comme avec le tag Chr

+0

@Chr Laissez-moi vous épargner l'effort: don jquery et jQueryUI » J'aime svg. Il est préférable de simplement utiliser vanilla javascript pour sélectionner les éléments svg. – Persijn

+0

Je suis d'accord avec vous, je n'aime pas ça, mais plutôt que de recoder toutes les fonctions ... – Chr