css - 样式化 '::before' 内容中使用的外部 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 文件的填充颜色。我通过将 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 不是你文档的一部分，它是你的样式无法访问的其他地方的另一个文档。

您需要查看其他技术，例如 mix-blend-mode 或 filter:

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>