1
votes

Placez un élément SVG sur un autre

Je me demande simplement s'il est possible de placer un élément SVG sur un autre. Voici mon HTML:

<svg id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
  <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="0"></rect>
  <rect x="582" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="1" style="
"></rect>
  <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5"></polygon>
</svg>

Je veux que ces deux rectangles apparaissent sur le polygone; J'ai essayé d'ajuster le z-index , mais cela ne semble pas fonctionner.

html svg

0 commentaires

3 Réponses :

1
votes

Changez la séquence. L'élément de niveau inférieur doit être écrit en premier.

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" id="two" pointNo="0"></rect>
  <rect x="582" y="95" width="16" height="16" class="handle" polygonNo="0"  id="one" pointNo="1" style=""></rect>
  <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5" ></polygon>
  <use xlink:href="#one"/>
  <use xlink:href="#two"/>
</svg>

Solution alternative

<svg id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
          <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5"></polygon>
          <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="0"></rect>
          <rect x="582" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="1" style=""></rect>
</svg>

2 commentaires

Merci pour votre réponse. Je sais que modifier la commande peut répondre à cette exigence et je cherche une solution avec la commande inchangée.

ils suivent "premier élément ->" peint "d'abord" donc ne peuvent pas appliquer de styles externes après la peinture. 3.3 Ordre de rendu Les éléments d'un fragment de document SVG ont un ordre de dessin implicite, les premiers éléments du fragment de document SVG étant "peints" en premier. Les éléments suivants sont peints au-dessus des éléments déjà peints.

0
votes

Si vous pouvez vous permettre de séparer votre élément SVG, vous pouvez également y parvenir en utilisant le positionnement CSS:

<svg class="top" id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
  <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="0"></rect>
  <rect x="500" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="1" style=""></rect>
</svg>

<svg class="bottom" id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
    <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5"></polygon>
</svg>

 .top{
position: absolute;
top: 34px;
left: 30px;
}

J'espère que cela vous aidera!

0 commentaires

1
votes

Vous pouvez également manipuler cela en utilisant JavaScript. Essentiellement, vous ajoutez les 2 rects au SVG en les déplaçant au-dessus du polygone.

appendChild () déplace un élément de sa position actuelle vers la nouvelle position et il n'est pas nécessaire de supprimer le nœud de son nœud parent avant de l'ajouter à nouveau.

De plus, vous avez une bordure pour le SVG sans border-style . Vous devez corriger cela.

<svg id="svg" width="950" height="910" style="border: 2px solid rgb(204, 204, 204); margin-top: 10px;">
  <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="0"></rect>
  <rect x="582" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="1" style="
"></rect>
  <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5"></polygon>
</svg>

let rects = svg.querySelectorAll(".handle");

rects.forEach(r=>{
  svg.appendChild(r)
})

0 commentaires