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

【问题标题】：CSS base64 .svg mask in Firefox - change background colourFirefox 中的 CSS base64 .svg 掩码 - 更改背景颜色
【发布时间】：2016-11-26 11:55:18
【问题描述】：

我有一个 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 上根本不可能？

提前感谢您的帮助。

【问题讨论】：

数据不包含掩码元素。 Firefox 仅支持指向掩码元素的掩码 url。
我需要在它周围添加遮罩，还是用遮罩创建一个新的？
在它周围添加掩码可能会起作用。试试看。您需要调整 URL，使其片段标识符为掩码 id
那么我只需要base64 .svg 的掩码部分，还是带有svg 标签的整个图像？第一次以这种方式使用 .svg 图片
带有 SVG 标签的整个图像。

标签： html css firefox svg mask

【解决方案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;
}

【讨论】：