外部SVG的样式化，用于“：：Styling”内容

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文件的填充颜色。为此，我将clicked类添加到a标记中。

我很难改变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;
}

我试图将path改为svg和其他一些东西，但这仍然不起作用！

Answer 1

因为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>

​