CSS 用作 base-64 背景图像数据时如何更改 svg 填充颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22384934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change svg fill color when used as base-64 background image data?
提问by Luca Reghellin
I'm using SVG for a project, loaded in css like this:
我正在将 SVG 用于一个项目，在 css 中加载，如下所示：
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%2238px%22%20viewBox%3D%220%200%2022%2038%22%20enable-background%3D%22new%200%200%2022%2038%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.style0%7Bfill%3A%09%23f47216%3B%7D%3C/style%3E%3Cpath%20d%3D%22M2.643%2038c-0.64%200-1.282-0.231-1.79-0.699c-1.074-0.988-1.143-2.661-0.154-3.735l13.13-14.258L0.664%204.4%20c-0.967-1.094-0.865-2.765%200.229-3.732s2.765-0.864%203.7%200.229L19.37%2017.592c0.898%201%200.9%202.545-0.035%203.542L4.588%2037.1%20C4.067%2037.7%203.4%2038%202.6%2038z%22%20class%3D%22style0%22/%3E%3C/svg%3E');
I have some hover states to highlight by changing the fill color of the arrow.
我通过更改箭头的填充颜色来突出显示一些悬停状态。
For now, I'm simply applying the same svg data with the fill portion (fill%3A%09%23f47216%3B%7D%3C where f47216is the color) changed with the right/new color. Works pretty well. Though, I'd like to know if there's maybe some other smarter method.
现在，我只是将相同的 svg 数据应用到填充部分（fill%3A%09%23f47216%3B%7D%3C，其中f47216是颜色）更改为正确的/新颜色。工作得很好。不过，我想知道是否还有其他更聪明的方法。
回答by JerryGoyal
回答by Jason Aller
Base64 for that would be:
Base64 将是：
url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMjIgMzgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyIDM4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0eWxlMHtmaWxsOgkjZjQ3MjE2O308L3N0eWxlPjxwYXRoIGQ9Ik0yLjY0MyAzOGMtMC42NCAwLTEuMjgyLTAuMjMxLTEuNzktMC42OTljLTEuMDc0LTAuOTg4LTEuMTQzLTIuNjYxLTAuMTU0LTMuNzM1bDEzLjEzLTE0LjI1OEwwLjY2NCA0LjQgYy0wLjk2Ny0xLjA5NC0wLjg2NS0yLjc2NSAwLjIyOS0zLjczMnMyLjc2NS0wLjg2NCAzLjcgMC4yMjlMMTkuMzcgMTcuNTkyYzAuODk4IDEgMC45IDIuNTQ1LTAuMDM1IDMuNTQyTDQuNTg4IDM3LjEgQzQuMDY3IDM3LjcgMy40IDM4IDIuNiAzOHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=');
using a tool like http://www.base64encode.org/
使用像http://www.base64encode.org/这样的工具
This doesn't answer your question directly, but it does let us do the following. We can now test to see if:
这不会直接回答您的问题，但它确实让我们执行以下操作。我们现在可以测试看看是否：
.icon:hover .style0 {
fill: red;
}
will work, or use
将工作，或使用
.icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMjIgMzgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyIDM4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0eWxlMHtmaWxsOgkjZjQ3MjE2O308L3N0eWxlPjxwYXRoIGQ9Ik0yLjY0MyAzOGMtMC42NCAwLTEuMjgyLTAuMjMxLTEuNzktMC42OTljLTEuMDc0LTAuOTg4LTEuMTQzLTIuNjYxLTAuMTU0LTMuNzM1bDEzLjEzLTE0LjI1OEwwLjY2NCA0LjQgYy0wLjk2Ny0xLjA5NC0wLjg2NS0yLjc2NSAwLjIyOS0zLjczMnMyLjc2NS0wLjg2NCAzLjcgMC4yMjlMMTkuMzcgMTcuNTkyYzAuODk4IDEgMC45IDIuNTQ1LTAuMDM1IDMuNTQyTDQuNTg4IDM3LjEgQzQuMDY3IDM3LjcgMy40IDM4IDIuNiAzOHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=');
height: 40px;
width: 40px;
}
.icon:hover {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMjIgMzgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyIDM4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0eWxlMHtmaWxsOglyZWQ7fTwvc3R5bGU+PHBhdGggZD0iTTIuNjQzIDM4Yy0wLjY0IDAtMS4yODItMC4yMzEtMS43OS0wLjY5OWMtMS4wNzQtMC45ODgtMS4xNDMtMi42NjEtMC4xNTQtMy43MzVsMTMuMTMtMTQuMjU4TDAuNjY0IDQuNCBjLTAuOTY3LTEuMDk0LTAuODY1LTIuNzY1IDAuMjI5LTMuNzMyczIuNzY1LTAuODY0IDMuNyAwLjIyOUwxOS4zNyAxNy41OTJjMC44OTggMSAwLjkgMi41NDUtMC4wMzUgMy41NDJMNC41ODggMzcuMSBDNC4wNjcgMzcuNyAzLjQgMzggMi42IDM4eiIgY2xhc3M9InN0eWxlMCIvPjwvc3ZnPg==');
}
which seems inefficient to me because we are forced to replicate a lot of the same information for the hover when all we want to change is the color.
这对我来说似乎效率低下，因为当我们只想改变颜色时，我们被迫为悬停复制许多相同的信息。
回答by tnt-rox
Or if you want to do it dynamically try :
或者，如果您想动态执行此操作，请尝试：
var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";
