如何更改 svg 文件的路径颜色？
[英]How to change path color of svg file?
问题描述
Is it possible to change the svg path color (not background.) if the svg is loaded from local file.
如果从本地文件加载 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>
Sidenote: I lateron want to reference the svg files locally, not from the web.旁注：我稍后想在本地引用 svg 文件，而不是来自 web。
3 个解决方案
解决方案1
1 已采纳 2020-08-06 09:31:16
The best way to implement SVG's into your HTML code and modify it with CSS is another.将 SVG 实现到 HTML 代码并使用 CSS 修改它的最佳方法是另一种方法。 SVG files contain attributes like stroke or fill . SVG 文件包含诸如stroke或fill之类的属性。 You can try by referencing these attributes with CSS to change its styling.您可以尝试使用 CSS 引用这些属性来更改其样式。 Also a were frequent method is to put as values into these attributes currentColor .还有一种常用的方法是将值作为值放入这些属性currentColor中。 So the color is corresponding to its CSS color parameter.所以颜色对应的是它的CSS颜色参数。 Just by changing the wrappers style to color: green you will be able to change the currentColor inside your SVG.只需将包装样式更改为color: green ，您就可以更改 SVG 中的currentColor 。
.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>
There are also some other issues:还有一些其他的问题：
You should'nt reference a file inside a repository directly.
您不应该直接引用存储库中的文件。 This won't be allowed by default.默认情况下不允许这样做。 So change https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svgtohttps://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg.So change https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svgtohttps://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg。If you are adding an SVG as a mask or background, you won't be able to adjust its styling.
如果您添加 SVG 作为蒙版或背景，您将无法调整其样式。Even inserting the file as an
srcattribute inside an<img/>tag wont't work very well.即使将文件作为src属性插入到<img/>标记内也不能很好地工作。Changing the
widthandheightof the SVG that already holds that information (have a look on the SVG code) isn't really possible;更改已经包含该信息的 SVG 的width和height（查看 SVG 代码）实际上是不可能的； not in an elegant.不在优雅之中。
Solution解决方案
So, after all I would recommend you to just copy the SVG code (it isn't really long), remove some attributes like width and height , but leave the viewBox and resize its wrapper or the <svg/> directly with some CSS rulesets.所以，毕竟我建议你只复制 SVG 代码（它不是很长），删除一些属性，如width和height ，但保留viewBox并使用一些 CSS 规则集直接调整其包装器或<svg/>的大小.
Last but not least change the fill parameter.最后但同样重要的是更改fill参数。 That's it.而已。
解决方案2
0 2020-08-06 09:26:40
There is a solution using mask-mode and mask-composite but it works only on Firefox actually.有一个使用mask-mode和mask-composite的解决方案，但它实际上只适用于 Firefox。
The idea is to use luminance (since your SVG is black/white) so we mask with the white part then we use exclude with a white background to invert the mask and keep the black part of the SVG.这个想法是使用luminance （因为您的 SVG 是黑色/白色）所以我们用白色部分遮罩，然后我们使用带有白色背景的排除来反转遮罩并保留 SVG 的黑色部分。
.status-icon1 { width: 48px; height: 48px; display: inline-block; border-radius:50%; background-color: green; mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGcgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0wIDdhNyA3IDAgMSAxIDE0IDBBNyA3IDAgMCAxIDAgN3oiLz4KICAgIDxwYXRoIGQ9Ik0xMyA3QTYgNiAwIDEgMCAxIDdhNiA2IDAgMCAwIDEyIDB6IiBmaWxsPSIjRkZGIiBzdHlsZT0iZmlsbDogdmFyKC0tc3ZnLXN0YXR1cy1iZywgI2ZmZik7Ii8+CiAgICA8cGF0aCBkPSJNNi4yNzggNy42OTdMNS4wNDUgNi40NjRhLjI5Ni4yOTYgMCAwIDAtLjQyLS4wMDJsLS42MTMuNjE0YS4yOTguMjk4IDAgMCAwIC4wMDIuNDJsMS45MSAxLjkwOWEuNS41IDAgMCAwIC43MDMuMDA1bC4yNjUtLjI2NUw5Ljk5NyA2LjA0YS4yOTEuMjkxIDAgMCAwLS4wMDktLjQwOGwtLjYxNC0uNjE0YS4yOS4yOSAwIDAgMC0uNDA4LS4wMDlMNi4yNzggNy42OTd6Ii8+CiAgPC9nPgo8L3N2Zz4K) center/contain, linear-gradient(#fff,#fff); mask-composite: exclude; mask-mode: luminance; }.status-icon2 { width: 48px; height: 48px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGcgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0wIDdhNyA3IDAgMSAxIDE0IDBBNyA3IDAgMCAxIDAgN3oiLz4KICAgIDxwYXRoIGQ9Ik0xMyA3QTYgNiAwIDEgMCAxIDdhNiA2IDAgMCAwIDEyIDB6IiBmaWxsPSIjRkZGIiBzdHlsZT0iZmlsbDogdmFyKC0tc3ZnLXN0YXR1cy1iZywgI2ZmZik7Ii8+CiAgICA8cGF0aCBkPSJNNi4yNzggNy42OTdMNS4wNDUgNi40NjRhLjI5Ni4yOTYgMCAwIDAtLjQyLS4wMDJsLS42MTMuNjE0YS4yOTguMjk4IDAgMCAwIC4wMDIuNDJsMS45MSAxLjkwOWEuNS41IDAgMCAwIC43MDMuMDA1bC4yNjUtLjI2NUw5Ljk5NyA2LjA0YS4yOTEuMjkxIDAgMCAwLS4wMDktLjQwOGwtLjYxNC0uNjE0YS4yOS4yOSAwIDAgMC0uNDA4LS4wMDlMNi4yNzggNy42OTd6Ii8+CiAgPC9nPgo8L3N2Zz4K) no-repeat; background-size: cover; display: inline-block; }
<div class="status-icon1"></div> <div class="status-icon2"></div>
解决方案3
0 2020-08-06 10:03:21
If you use your svg as image (which seems to be the case here), you can't affect its content: it's a standalone document.如果您使用 svg 作为图像（这里似乎就是这种情况），您不能影响其内容：它是一个独立的文档。 If you use it inline, you can style it: simply put classes inside your svg, and use them in your css.如果您使用它内联，您可以设置样式：只需将类放在 svg 中，然后在 css 中使用它们。 In this case, if i understand correctly, you wish to use an svg as a mask in order to show a background color (which would then be a pseudo svg fill color).在这种情况下，如果我理解正确，您希望使用 svg 作为掩码以显示背景颜色（然后将是伪 svg 填充颜色）。 If it's that, you could use your svg inlined, and style it.如果是这样，您可以使用内联的 svg 并设置样式。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.