为“::before”内容中使用的外部 SVG 设置样式答案

【问题标题】：Styling external SVG used in '::before' content为“::before”内容中使用的外部 SVG 设置样式
【发布时间】：2016-08-28 18:50:21
【问题描述】：

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 并加上其他一些东西，但这仍然不起作用！

【问题讨论】：

没有。你不能像这样设置 SVG 样式，它是一个 SVG 图像，不是 SVG 元素，所以内部部分无法通过 CSS 或几乎任何 TBH 访问。
这是什么意思，SVG 图像而不是 SVG 元素？

标签： css svg

【解决方案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>

【讨论】：

谢谢！我认为对我来说最好的事情是创建一个具有所需颜色的新 SVG 并在两种颜色之间切换。但是，我仍然不明白，如果我在 SVG 代码内部添加对外部 css 文件的引用，为什么不能设置我的 SVG 样式。
@Galdalf 即使那样，它也不会对悬停做出反应，除非您使用对象标签或框架:(。我更喜欢过滤器 codepen.io/gc-nomade/pen/qZQGRQ ，但要从 2 个 SVG 交换图像是最可靠的方法。您甚至可以使用 2 个伪图像相互混合并切换不透明度值：)
谢谢！我设法用两个 SVG 文件做到了这一点，因为我向所需的链接添加了一个类，所以这样很容易。但我仍然不明白为什么我不能做我在原始问题中提到的链接中提到的内容。有什么区别？