Problème pour insérer une boucle dans un svg

Bonjour à tous,

Je suis en train de développer une application assez conséquente et je me suis tourné vers Vue (que je ne connaissais pas) pour sa relative simplicité.
Jusqu’ici pas de problème mais j’en rencontre un lorsque je veux boucler un tableau dans une balise .

Voici la partie du code qui pose problème:
Le JS qui contient les formes et coordonnées de mon SVG :
carParts: [
{
partId: 1,
partName: ‘Calandre’,
partLink: “#”,
partType: ‘path’,
partTrans: ‘d’,
partCoord: 'M81.581,214.457c0,0-5.479-1.626-8.05,7.007 c-1.82,6.111-4.409,52.534,4.775,58.501c12.904,8.384,50.514,20.116,50.514,20.116s4.225,2.021,6.613,0 c1.785-1.51,3.857-5.51,4.959-14.327s9.184-29.206,10.103-31.043s8.329-12.405,1.226-21.448 c-1.972-2.244-12.574-4.416-35.938-10.344S81.581,214.457,81.581,214.457z'
},
{
partId: 2,
partName: ‘Jante avant gauche’,
partLink: “#”,
partType: ‘ellipse’,
partTrans: ‘transform’,
partCoord:"matrix(0.9632 0.2689 -0.2689 0.9632 86.9602 -75.026)" cx="317.389" cy="279.966" rx="28.098" ry="45.3"
}
]

Et voici le html qui est sensé les lire, le but est que chaque forme ait son propre lien je boucle donc sur la balise :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 600 600" >
            <image :xlink:href="image" width="625" height="360" />
            <g>
                <a v-for="carPart in carParts"
                :key="carPart.partId"
                :xlink:title="carPart.partName"  
                :xlink:href="carPart.partLink"
                :xlink:alt="carPart.partName" >
                    <{{ carPart.partType }} id="{{carPart.partId}}" {{carPart.partTrans}}={{carPart.partCoord}} />
                </a>           
            </g>
        </svg>

L’inconvénient c’est que l’inspecteur me montre bien le code que je souhaite obtenir mais rien ne fonctionne et dans mon IDE la balise ouvrante de ma forme est en rouge.

Si quelqu’un a une petite idée ça m’aiderait vraiment.
Merci d’avance :slight_smile:

de quelle balise tu parles ?

ce qui est sûr, c’est que :

<{{ carPart.partType }} id="{{carPart.partId}}" {{carPart.partTrans}}={{carPart.partCoord}} />

ce n’est pas correct

pour changer dynamiquement la balise, il faut utiliser le composant spéciale component :
<component :is="carPart.partType">

pour utiliser du JS dans les attribuer, il faut binder les attributs :
v-bind:id="carPart.partId" ou plus court :id="carPart.partId"

comme le lien le montre, le bindage dynamique peut être fait avec
:[carPart.partTrans]="carPart.partCoord" (vue 2.6.0+)
v-bind="{ [carPart.partTrans]: carPart.partCoord }" (sinon)

Merci pour ton retour. En effet je me suis rendu compte que c’était incorrect après quelques essais et avoir relu la doc!
Ce qui m’a posé le plus de problème c’est que dans mon svg j’avais des <path> et des <ellipse> et je n’ai jamais trouvé comment les gérer dynamiquement selon les différents cas de figure, j’ai donc tout repassé en <path> et binder les attributs et effectivement tout fonctionne pour le moment :slight_smile:

Pour ce qui est de la balise rouge, finalement c’est parce que la balise svg ne supporte aucune balise à l’intérieur mis à part <a> <g> et les balises de forme, même la balise vue.js <template> me posait problème.

Merci en tout cas pour ton aide :+1: