如果从本地文件加载 svg，是否可以更改 svg path 颜色(不是背景!)。
.status-icon1 {
width: 48px;
height: 48px;
display: inline-block;
background-color: green;
mask: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat 50% 50%;
-webkit-mask: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat 50% 50%;
}
.status-icon2 {
width: 48px;
height: 48px;
background: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat;
background-size: cover;
display: inline-block;
}<html>
<body>
<div class="status-icon1"></div>
<div class="status-icon2"></div>
</body>
</html>旁注:稍后我想在本地引用 svg 文件，而不是从网络引用。
最佳答案
将 SVG 实现到 HTML 代码中并使用 CSS 对其进行修改的最佳方法是另一种方法。 SVG 文件包含类似 stroke 的属性或fill 。您可以尝试通过 CSS 引用这些属性来更改其样式。还有一种常见的方法是将值放入这些属性 currentColor 。所以颜色是对应它的CSS颜色参数的。只需将包装样式更改为 color: green您将能够更改 currentColor在你的 SVG 中。
.status {
fill: #ff11ac;
width: 10rem;
height: 10rem;
color: green;
img {
fill: #ff11ac;
width: 10rem;
height: 10rem;
}
}<h2>Change fill paremter with CSS</h2>
<div class="status">
<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF" style="fill: var(--svg-status-bg, #fff);"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
</div>
<h2>Change currentColor with CSS</h2>
<div class="status">
<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" fill="currentColor"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF" style="fill: var(--svg-status-bg, #fff);"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
</div>
<h2>IMG "solution" (won't work)</h2>
<div class="status">
<img
src="https://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg"/>
</div>还有一些其他问题:
您不应直接引用存储库内的文件。默认情况下不允许这样做。所以改变
https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg至https://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg.如果您添加 SVG 作为蒙版或背景，您将无法调整其样式。
甚至将文件插入为
src<img/>内的属性标签不能很好地工作。更改
width和height已经保存该信息的 SVG(查看 SVG 代码)实际上是不可能的；不优雅。
解决方案
所以，毕竟我建议您复制 SVG 代码(它并不长)，删除一些属性，例如 width和height ，但保留viewBox并调整其包装器或 <svg/> 的大小直接使用一些 CSS 规则集。
最后但并非最不重要的一点是更改 fill范围。就是这样。
关于html - 如何更改 svg 文件的路径颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63280257/