[英]How to change path color of svg 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>
旁注：我稍后想在本地引用 svg 文件，而不是來自 web。
將 SVG 實現到 HTML 代碼並使用 CSS 修改它的最佳方法是另一種方法。 SVG 文件包含諸如stroke或fill之類的屬性。 您可以嘗試使用 CSS 引用這些屬性來更改其樣式。 還有一種常用的方法是將值作為值放入這些屬性currentColor中。 所以顏色對應的是它的CSS顏色參數。 只需將包裝樣式更改為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>
還有一些其他的問題：
您不應該直接引用存儲庫中的文件。 默認情況下不允許這樣做。 So change https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg to https://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg 。
如果您添加 SVG 作為蒙版或背景，您將無法調整其樣式。
即使將文件作為src屬性插入到<img/>標記內也不能很好地工作。
更改已經包含該信息的 SVG 的width和height （查看 SVG 代碼）實際上是不可能的； 不在優雅之中。
所以，畢竟我建議你只復制 SVG 代碼（它不是很長），刪除一些屬性，如width和height ，但保留viewBox並使用一些 CSS 規則集直接調整其包裝器或<svg/>的大小.
最后但同樣重要的是更改fill參數。 而已。
有一個使用mask-mode和mask-composite的解決方案，但它實際上只適用於 Firefox。
這個想法是使用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>
如果您使用 svg 作為圖像（這里似乎就是這種情況），您不能影響其內容：它是一個獨立的文檔。 如果您使用它內聯，您可以設置樣式：只需將類放在 svg 中，然后在 css 中使用它們。 在這種情況下，如果我理解正確，您希望使用 svg 作為掩碼以顯示背景顏色（然后將是偽 svg 填充顏色）。 如果是這樣，您可以使用內聯的 svg 並設置樣式。
如何更改 HTML 中 SVG 中路徑的筆觸顏色和填充顏色？
[英]How to change the stroke color and fill color of just path in SVG in HTML?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.