CSS base64 .svg mask in Firefox - change background colour

Question

I have a base64 .svg image as a mask background applied to an element. The user can change the background of the element any colour they wish.

This is my 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;
}

Then the user can use a colour picker, which changes the background of the element (hence changing the colour of the svg image.)

This works fine in Chrome but doesn't work at all on Firefox.

The original svg content is below.

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

Could I do something to the svg file itself to allow the colour to be changed, or is this not possible at all on Firefox?

Thanks for any help in advance.

Answer 1

Firefox now support mask Css property. You can try to use that.

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