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>

在＆＃39; ::之前使用的外部SVG样式内容

1 个答案: