2017-07-21 2 views
-1

J'ai un fichier SVG qui est une sorte de photo de groupe contenant 12 caractères. Le SVG contient également le positionnement de ces caractères dans la photo de groupe. Chaque caractère a un id. Maintenant, en utilisant SVG <use> je voudrais réutiliser ces caractères uniques dans une autre partie de la page.Comment positionner l'image SVG provenant de SVG <use>

Comme ceci:

enter image description here

Remarquez la tête montrant en bas à gauche de l'image supérieure. Comme vous pouvez le voir, le positionnement ne fonctionne pas. J'ai déjà essayé de définir top, left, position: absolute, translate(0, 0) - mais sans succès.

En fait, il devrait ressembler à ceci: enter image description here

J'ai mis en place un codepen où vous pouvez voir la question. Une idée pour que ça marche?

+0

Nous avons besoin d'un exemple minimal ** ** ... de préférence dans une pile Snippet pas rendu complet de la page entière dans un lien. –

+0

hmm, eh bien, je suis d'accord. OTOH le problème est principalement visible en raison de la grande position SVG dans le SVG. J'ai donc pensé que regarder avec l'inspecteur de DevTool pourrait bien se passer. – nachtigall

Répondre

1

Ajouter ce style

.st-infobox__img svg use { 
    transform: translate(-300px, -100px); 
} 

corrected codepen

+0

Thx, pour regarder dedans aussi le code donné n'était vraiment ni parfait ni minimal! – nachtigall