Changement SVG Couleur de Remplissage sur le vol stationnaire d'un autre élément

J'ai fait des recherches pendant un certain temps aujourd'hui sur la façon de changer une svg couleur de remplissage sur le vol stationnaire. J'ai été capable de le faire fonctionner à l'aide d'une balise object et un lien vers mon fichier CSS pour que je puisse le style à l'extérieur. Cependant je ne peux obtenir que cela fonctionne lorsque j'ai fait planer sur le SVG lui-même. J'ai mon objet et une étiquette de texte à l'intérieur d'une balise et voudrais changer le remplissage du SVG et la couleur du texte de l'étiquette dans le même temps, tout en plaçant la . Lorsque j'essaie de ciblage plus haut que l'objet ne fonctionne pas. Je crois que j'ai lu qu'une SVG à l'intérieur d'un objet ne reconnaît pas tous les éléments de parent donc je ne sais pas si c'est ça le problème. Toute aide serait appréciée! Ci-dessous est un extrait de mon code html. Je me dois de souligner la catégorie "icône-md" est de définir la hauteur et la largeur de mon SVG.

<div class="icon-button">
            <a href="#">
                <object type="image/svg+xml" class="icon-md" data="img/load-board.svg"></object><h3 class="icon-label">Load Board</h3>
            </a>
        </div>

Ici est aussi le HTML de mon fichier SVG. J'ai donné le chemin d'accès réel un id de "chemin", et c'est ce que je suis en ciblant spécifiquement dans mon fichier CSS externe.

<?xml-stylesheet type="text/css" href="../stylesheets/main.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64">
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 10 10 L 10 15 L 15 15 L 15 10 L 10 10 z M 17 10 L 17 15 L 22 15 L 22 10 L 17 10 z M 10 17 L 10 22 L 15 22 L 15 17 L 10 17 z M 17 17 L 17 22 L 22 22 L 22 17 L 17 17 z" overflow="visible" font-family="Bitstream Vera Sans"/>
</svg>

vous devez pour ce faire, au sein de charge-conseil.svg, mais vous n'avez pas montré que.

InformationsquelleAutor lblankenship | 2016-07-21

6

Étiez-vous penser à quelque chose comme ça ?

CSS:
```
div{
  padding:10px;
  border:1px solid black;
}
div:hover svg path,
div:hover{
  fill:red;
  color:red;
}
```
HTML:
```
<div>
This is plain text
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64">
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 10 10 L 10 15 L 15 15 L 15 10 L 10 10 z M 17 10 L 17 15 L 22 15 L 22 10 L 17 10 z M 10 17 L 10 22 L 15 22 L 15 17 L 10 17 z M 17 17 L 17 22 L 22 22 L 22 17 L 17 17 z" overflow="visible" font-family="Bitstream Vera Sans"/>
</svg>
</div>
```
- Oui! Cela fonctionne comme je le veux. Cependant, j'ai remarqué que vous mettez le code SVG directement dans le HTML. Savez-vous si il est possible d'accomplir cette tâche en utilisant le <object> méthode de sorte que le code SVG n'ont pas à être mis dans le HTML, à chaque fois, il est référencé? Si pas je peux juste aller de l'avant avec cette solution, d'autant qu'elle n'accomplit le résultat final que je veux.
- vous pouvez le mettre dans l'objet, mais vous avez besoin pour rendre le fichier svg de référence le CSS directement, ayant le code html de référence de la CSS ne fonctionne pas.
- donc, vous dites, j'aurais besoin de mes CSS directement dans le fichier SVG? J'ai déjà une référence à mon fichier CSS externe, cependant je n'ai pu le faire fonctionner sur le vol stationnaire de l'SVG lui-même.
- Vous pouvez l'inclure via xml-stylesheet comme vous le faites.
- Hmm. Mon problème je pense que je n'étais pas en mesure de cibler correctement le chemin d'accès à chaque fois que j'ai essayé de l'objet svg #chemin (j'ai essayé d'autres parent/enfant, les chemins de trop), il ne serait pas appliquer des styles quand je survole le <a> autour de l'objet. Il serait travailler pour l'étiquette à l'intérieur du <a> mais le svg n'a fonctionné quand j'ai changé mon css pour appliquer les styles quand je survole le SVG en particulier.
InformationsquelleAutor Carle B. Navy
-1

Avez-vous essayé d'utiliser le SVG en ligne, au lieu de l'avoir en tant que source de données ou attribut d'un élément?

ÉDITÉ avec mise à jour de l'article:
https://css-tricks.com/svg-use-with-external-reference-take-2/
- J'essaie d'éviter que parce que le projet que je suis en train de travailler sur sera probablement tout à fait un peu de SVGs par page et il y aura probablement des centaines de pages. Donc, à partir d'un point de vue entretien, je ne pense pas que ce serait mieux pour moi.
- Je suis confus...si vous référant à partir d'une ressource externe dans les données d'attribut de l'objet, pourquoi ne pas juste utiliser <svg class="icon-md"><utiliser xlink:href="img/charge-conseil.svg"></use></svg>?
- Lors de l'utilisation de ce que vous venez référencé mon SVG ne pas montrer à tous pour une raison quelconque. Je suis allé à travers cet article svgontheweb.com et utilisé la méthode de l'objet qui a été inscrite et j'ai été capable de faire ce qu'ils ont dit et modifier le remplissage sur le vol stationnaire. Cependant je veux planer un de complètement différent de l'élément et changer mon SVG couleur plutôt que d'avoir à placer le pointeur de la SVG lui-même. Je dois aussi dire, l'icône de la classe-md est de définir la taille de la SVG. J'ai effectivement mis à jour le code html dans le fichier SVG et a donné le chemin d'accès d'un id de "chemin", qui est ce que je référence dans mon CSS pour le :hover événement.
InformationsquelleAutor Wade Hammes

Vous devez vous connecter pour publier un commentaire.