スタイリング外部SVG '::前のコンテンツ

Question

HTML - どこかnavタグ内：

<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; 
} 

私はリンクの色を変更したいとリンクがクリックされたときのSVGファイルの塗りつぶし色。私はaタグにclickedクラスを追加しています。

私はSVGの塗りつぶしの色を変更するのに苦労しています。 thisに続いて、私のSVGファイルは次のようになります。

<?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> 

そしてCSSで私は

path { 
    fill: FireBrick; 
} 

を持っている私はsvgとカップル他のものにpathを変更しようとしましたが、まだ動作しないこと！

Answer 1

svgがドキュメントの一部ではないため、できません。スタイルがアクセスできない別のドキュメントです。

あなたは他のテクニクスなどのミックス・ブレンドモードやフィルタを見てする必要があります：あなたがそのようなSVGのスタイルを設定することはできません

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>