【问题标题】: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;
}

【讨论】:

    猜你喜欢
    • 2022-01-07
    • 1970-01-01
    • 1970-01-01
    • 2011-11-25
    • 2014-10-19
    • 2019-06-20
    • 1970-01-01
    • 2019-07-14
    • 1970-01-01
    相关资源
    最近更新 更多