Styling externer SVG in ':: before' Inhalt verwendet

HTML - irgendwo in nav tag:Styling externer SVG in ':: before' Inhalt verwendet

<li><a id='readme-link' class='clicked'>README.md</a></li>

CSS

nav a::before { 
    content: url('icons/file-text.svg'); 
    opacity: 0.87; 
    margin-right: 0.5ch; 
    position: relative; 
    top: 0.5ch; 
}

Ich mag die Farbe der Verbindung ändern und die Füllfarbe der SVG-Datei, wenn auf die Verknüpfung geklickt wird. Ich mache es, indem ich die clicked Klasse zum a Tag hinzufüge.

Ich habe es schwer, die Füllfarbe des SVG zu ändern. Nach this sieht meine SVG-Datei wie folgt:

<?xml-stylesheet type="text/css" href="../style.css" ?> 
<svg id='file-text-svg' height="16" width="14" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z" /> 
</svg>

Und in der CSS Ich habe

path { 
    fill: FireBrick; 
}

Ich versuchte path-svg und ein paar andere Sachen zu ändern, aber das funktioniert immer noch nicht!

Quelle

2016-05-03 galah92

No. Sie kein SVG so stylen kann, ist es ein SVG-Bild, dass Stellen Sie kein SVG-Element, so dass die inneren Teile nicht mit CSS oder so ziemlich alles TBH zugänglich sind. –

Was bedeutet das, SVG-Bild und nicht SVG-Element? – galah92

Sie können nicht, da die Svg nicht Teil Ihres Dokuments ist, ist es ein anderes Dokument an anderer Stelle, auf die Ihr Stil nicht zugreifen kann.

Sie in anderen Techniken wie zum Mix-blend-Modus oder Filter suchen müssen:

a::before, a::after { 
 
    content: url(https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg); 
 
    opacity: 0.87; 
 
    margin-right: 0.5ch; 
 
    position: relative; 
 
    top: 0.5ch; 
 
    } 
 

 
/* change color of SVG via filter */ 
 
a::before { 
 
    -webkit-filter:hue-rotate(170deg); 
 
      filter:hue-rotate(170deg); 
 
} 
 

 
/* mix-blend-mode */ 
 
a[href] { 
 
    background:linear-gradient(to right,red , red) no-repeat bottom left ; 
 
    background-size:12px 12px; 
 
    } 
 
a[href]::before { 
 
    /* reset previous filter */ 
 
    -webkit-filter:hue-rotate(0deg); 
 
      filter:hue-rotate(0deg); 
 
    box-shadow:inset 0 0 0 120px white; 
 
    mix-blend-mode:screen;

<a id='readme-link' class='clicked'>::before hue-rotate</a> <br/> 
 
<a href >::before mix-blend-mode</a>

Quelle

2016-05-03 16:25:05

Danke! Ich denke, das Beste für mich ist, ein neues SVG mit der gewünschten Farbe zu erstellen und zwischen zwei zu wechseln. Aber ich verstehe immer noch nicht, warum ich mein SVG nicht stylen kann, wenn ich einen Verweis auf eine externe CSS-Datei ** innerhalb ** des SVG-Codes hinzugefügt habe. – galah92

@Galdalf selbst dann, es wird nicht auf Hover reagieren, es sei denn, Sie verwenden ein Objekt-Tag oder einen Rahmen :(. Meine Präferenz würde für den Filter gehen http://codepen.io/gc-nomade/pen/qZQGRQ, aber von 2 SVG-Bild zu tauschen ist die solide Art. Sie können sie sogar ein bisschen mischen, indem Sie 2 Pseudos übereinander verwenden und Opazitätswerte wechseln :) –

Danke! Ich habe es mit zwei SVG-Dateien geschafft, weil ich dem gewünschten Link eine Klasse hinzufüge, so dass es so einfach ist. ABER ich verstehe immer noch nicht, warum ich nicht tun kann, was in dem Link erwähnt wird, auf den ich in der ursprünglichen Frage Bezug genommen habe. Was ist der Unterschied? – galah92

Styling externer SVG in ':: before' Inhalt verwendet

Antwort

Verwandte Themen