svg chargé comme objet

Salut je suis assez nouveau à js et je ne comprends pas très bien comment svg est censé fonctionner.svg chargé comme objet

J'ai généré un fichier svg que je veux utiliser dans la page Web. Le fichier est assez gros et je ne veux pas le coller en ligne, car je veux pouvoir le remplacer par un autre. Je dois également avoir accès à ses éléments, AFAIK, la seule option est de le charger comme <object> au lieu de <img>

Cependant, je trouve beaucoup de mises en garde quand je le charge de cette façon.

L'un d'entre eux est l'ordre de dessin lorsque je veux ajouter plus de couches svg sur l'objet.

Si j'écris les éléments dans cet ordre

blue circle svg 
object 
green circle svg

Je vois le cercle bleu sur l'objet et le cercle vert à côté de l'objet (comme si elle était poussée par l'objet). Je m'attendrais à voir le premier élément que j'ai dessiné en arrière-plan et le dernier sur le devant.

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> 
<circle id = "AGV01R" cx = "140" cy="100" r = "20" fill = "blue"></circle> 
</svg> 

<object type = "image/svg+xml" data="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" class="plano" id="plano"></object> 

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> 
<circle id = "AGV02R" cx = "140" cy="100" r = "15" fill = "green"></circle> 
</svg>

http://codepen.io/mrcasty/pen/egXaBj

Source

2017-02-15 javanoob

Je vous serais reconnaissant toute alternative d'utiliser des objets quand je veux avoir accès aux éléments internes d'un svg embeded – javanoob

J'ai fourni [cette réponse] (http: // stackoverflow .com/a/35788464/5218951) à une question différente sur la façon d'appliquer des styles aux éléments svg externes, mais le principe s'applique ici, je crois. Vous pouvez intégrer un élément svg externe tel que décrit dans cette réponse, puis le manipuler comme vous le souhaitez (par exemple, en utilisant JavaScript pour ajouter des cercles bleus et verts au-dessus et en dessous, etc.) après l'avoir inséré. –

Si vous souhaitez placer trois éléments HTML de sorte qu'ils sont empilés sur le dessus (plus) un autre, la meilleure solution est de les envelopper dans un récipient qui est aussi « positionné ». Je veux dire par là qu'il a une propriété position dans son style.

Normalement, les utilisateurs utilisent position: relative, car cela n'affecte pas la position d'écoulement normale de l'élément conteneur.

.container { 
 
    position: relative; 
 
} 
 

 
.container svg, 
 
.container object { 
 
    position:absolute; 
 
}

<div class="container"> 
 

 
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> 
 
    <circle id = "AGV01R" cx = "140" cy="100" r = "20" fill = "blue"></circle> 
 
    </svg> 
 

 
    <object type = "image/svg+xml" data="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" class="plano" id="plano"> 
 
</object> 
 

 
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> 
 
    <circle id = "AGV02R" cx = "140" cy="100" r = "15" fill = "green"></circle> 
 
    </svg> 
 
    
 
</div>

Quant à votre autre question. Si vous voulez manipuler le DOM d'un fichier SVG, vous devez le mettre en ligne ou utiliser <object>. Il n'y a pas d'autre choix.

Ce que certaines personnes font est d'utiliser un script qui s'exécute sur le chargement de la page qui charge les fichiers externes et les met automatiquement en ligne. Comme suggéré par @ andrew-Willems:

Include SVG files with HTML, and still be able to apply styles to them?

Source

2017-02-16 05:43:29

Merci, la position absolue de l'objet fonctionne très bien même si je n'utilise pas de div. Cependant, je comprends pourquoi il corrige les positions, mais je ne comprends pas pourquoi il fixe aussi l'ordre de dessin. Pourquoi dans mon codepen le bleu encerclé a été dessiné devant l'objet et pas derrière lui? – javanoob

Les éléments non positionnés sont dessinés avant les éléments positionnés. Donc, le '

svg chargé comme objet

Répondre

Questions connexes