html - Firefox 中的 CSS base64 .svg 掩码 - 更改背景颜色

Question

我有一个 base64 .svg 图像作为应用于元素的蒙版背景。用户可以根据需要更改元素的背景颜色。

这是我的CSS

.tapToSign {
    mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ0NXIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTAuNjg1LDEwaDIuMzcyVjkuNzk1YzAuMTA4LTQuNDM0LDMuNzI0LTcuOTk2LDguMTY5LTcuOTk2YzQuNTE1LDAsOC4xNzQsMy42NzIsOC4xNzQsOC4yMDFzLTMuNjU5LDguMTk5LTguMTc0LDguMTk5Yy0xLjg5OCwwLTMuNjQ1LTAuNjUtNS4wMzMtMS43MzhsMS40MDYtMS41MDRjMS4wMTYsMC43NDgsMi4yNywxLjE5MywzLjYyNywxLjE5M2MzLjM4NiwwLDYuMTMxLTIuNzU0LDYuMTMxLTYuMTVjMC0zLjM5Ni0yLjc0NS02LjE1LTYuMTMxLTYuMTVjLTMuMzE3LDAtNi4wMTgsMi42NDMtNi4xMjUsNS45NDVWMTBoMi42NzJsLTMuNDk0LDMuODk0TDAuNjg1LDEweiIvPjwvc3ZnPg==) center center no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ0NXIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTAuNjg1LDEwaDIuMzcyVjkuNzk1YzAuMTA4LTQuNDM0LDMuNzI0LTcuOTk2LDguMTY5LTcuOTk2YzQuNTE1LDAsOC4xNzQsMy42NzIsOC4xNzQsOC4yMDFzLTMuNjU5LDguMTk5LTguMTc0LDguMTk5Yy0xLjg5OCwwLTMuNjQ1LTAuNjUtNS4wMzMtMS43MzhsMS40MDYtMS41MDRjMS4wMTYsMC43NDgsMi4yNywxLjE5MywzLjYyNywxLjE5M2MzLjM4NiwwLDYuMTMxLTIuNzU0LDYuMTMxLTYuMTVjMC0zLjM5Ni0yLjc0NS02LjE1LTYuMTMxLTYuMTVjLTMuMzE3LDAtNi4wMTgsMi42NDMtNi4xMjUsNS45NDVWMTBoMi42NzJsLTMuNDk0LDMuODk0TDAuNjg1LDEweiIvPjwvc3ZnPg==) center center no-repeat;
    -moz-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ0NXIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTAuNjg1LDEwaDIuMzcyVjkuNzk1YzAuMTA4LTQuNDM0LDMuNzI0LTcuOTk2LDguMTY5LTcuOTk2YzQuNTE1LDAsOC4xNzQsMy42NzIsOC4xNzQsOC4yMDFzLTMuNjU5LDguMTk5LTguMTc0LDguMTk5Yy0xLjg5OCwwLTMuNjQ1LTAuNjUtNS4wMzMtMS43MzhsMS40MDYtMS41MDRjMS4wMTYsMC43NDgsMi4yNywxLjE5MywzLjYyNywxLjE5M2MzLjM4NiwwLDYuMTMxLTIuNzU0LDYuMTMxLTYuMTVjMC0zLjM5Ni0yLjc0NS02LjE1LTYuMTMxLTYuMTVjLTMuMzE3LDAtNi4wMTgsMi42NDMtNi4xMjUsNS45NDVWMTBoMi42NzJsLTMuNDk0LDMuODk0TDAuNjg1LDEweiIvPjwvc3ZnPg==) center center no-repeat;
}

然后用户可以使用颜色选择器来改变元素的背景(从而改变 svg 图像的颜色。)

这在 Chrome 中运行良好，但在 Firefox 上根本不起作用。

原始svg内容如下。

<svg version="1.1" id="CCW" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
    <path d="M0.685,10h2.372V9.795c0.108-4.434,3.724-7.996,8.169-7.996c4.515,0,8.174,3.672,8.174,8.201s-3.659,8.199-8.174,8.199
c-1.898,0-3.645-0.65-5.033-1.738l1.406-1.504c1.016,0.748,2.27,1.193,3.627,1.193c3.386,0,6.131-2.754,6.131-6.15
c0-3.396-2.745-6.15-6.131-6.15c-3.317,0-6.018,2.643-6.125,5.945V10h2.672l-3.494,3.894L0.685,10z"/>
</svg>

我可以对 svg 文件本身做些什么来改变颜色，还是这在 Firefox 上根本不可能？

提前感谢您的帮助。

Answer 1

Firefox 现在支持 mask Css 属性。您可以尝试使用它。

.tapToSign {
    mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ0NXIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTAuNjg1LDEwaDIuMzcyVjkuNzk1YzAuMTA4LTQuNDM0LDMuNzI0LTcuOTk2LDguMTY5LTcuOTk2YzQuNTE1LDAsOC4xNzQsMy42NzIsOC4xNzQsOC4yMDFzLTMuNjU5LDguMTk5LTguMTc0LDguMTk5Yy0xLjg5OCwwLTMuNjQ1LTAuNjUtNS4wMzMtMS43MzhsMS40MDYtMS41MDRjMS4wMTYsMC43NDgsMi4yNywxLjE5MywzLjYyNywxLjE5M2MzLjM4NiwwLDYuMTMxLTIuNzU0LDYuMTMxLTYuMTVjMC0zLjM5Ni0yLjc0NS02LjE1LTYuMTMxLTYuMTVjLTMuMzE3LDAtNi4wMTgsMi42NDMtNi4xMjUsNS45NDVWMTBoMi42NzJsLTMuNDk0LDMuODk0TDAuNjg1LDEweiIvPjwvc3ZnPg==) center center no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ0NXIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTAuNjg1LDEwaDIuMzcyVjkuNzk1YzAuMTA4LTQuNDM0LDMuNzI0LTcuOTk2LDguMTY5LTcuOTk2YzQuNTE1LDAsOC4xNzQsMy42NzIsOC4xNzQsOC4yMDFzLTMuNjU5LDguMTk5LTguMTc0LDguMTk5Yy0xLjg5OCwwLTMuNjQ1LTAuNjUtNS4wMzMtMS43MzhsMS40MDYtMS41MDRjMS4wMTYsMC43NDgsMi4yNywxLjE5MywzLjYyNywxLjE5M2MzLjM4NiwwLDYuMTMxLTIuNzU0LDYuMTMxLTYuMTVjMC0zLjM5Ni0yLjc0NS02LjE1LTYuMTMxLTYuMTVjLTMuMzE3LDAtNi4wMTgsMi42NDMtNi4xMjUsNS45NDVWMTBoMi42NzJsLTMuNDk0LDMuODk0TDAuNjg1LDEweiIvPjwvc3ZnPg==) center center no-repeat;
}