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;
}