将SVG输出直接与页面代码一起放置我可以使用CSS简单地修改填充颜色,如下所示:
polygon.mystar {
fill: blue;
}
circle.mycircle {
fill: green;
}
这很好用,但我正在寻找一种方法来修改SVG的“填充”属性,当它被用作背景图像时 .
html {
background-image: url(../img/bg.svg);
}
我现在该如何改变颜色?它甚至可能吗?
作为参考,这是我的外部SVG文件的内容:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679
118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>
14 回答
我认为你这样做的唯一方法是从服务器端机制服务你的svg . 只需创建一个资源服务器端,根据GET参数输出您的svg,然后在某个URL上提供它 .
然后你只需在你的CSS中使用该URL .
因为作为背景img,它不是DOM的一部分,你不能操纵它 . 另一种可能性是定期使用它,以正常方式将其嵌入页面中,但绝对定位,使其成为页面的全宽和高度,然后使用z-index css属性将其置于所有其他DOM元素之后在页面上 .
我需要类似的东西,并希望坚持使用CSS . 这里有LESS和SCSS mixins以及可以帮助你解决这个问题的简单CSS . 不幸的是,它的浏览器支持有点松懈 . 有关浏览器支持的详细信息,请参阅
较少混合:
使用率较低:
SCSS mixin:
SCSS用法:
CSS:
Here is more info将完整的SVG代码嵌入到CSS文件中 . 它还提到了浏览器兼容性,这对于一个可行的选择而言有点小 .
另一种方法是使用面罩 . 然后,您可以更改蒙版元素的背景颜色 . 这与更改svg的fill属性具有相同的效果 .
HTML:
CSS:
你会在这里找到一个完整的教程:http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images(不是我自己的) . 它提出了各种方法(不限于掩模) .
您可以使用CSS蒙版,使用'mask'属性,可以创建应用于元素的蒙版 .
欲了解更多,请看这篇好文章:https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
这可能与萨斯!你唯一要做的就是对你的svg代码进行url编码 . 这可以通过Sass中的辅助函数实现 . 我为此制作了一个代码 . 看这个:
http://codepen.io/philippkuehn/pen/zGEjxB
下载您的svg文本 .
使用javascript修改svg文本以更改绘画/笔触/填充颜色[s] .
然后将修改后的svg字符串嵌入到您的css中,如here所述 .
现在您可以在客户端实现此目的:
Fiddle here!
您可以将SVG存储在变量中 . 然后根据您的需要(即设置宽度,高度,颜色等)操纵SVG字符串 . 然后使用结果设置背景,例如
我也做了一个演示,http://sassmeister.com/gist/4cf0265c5d0143a9e734 .
该代码对SVG做了一些假设,例如
<svg />
元素没有现有的填充颜色,并且既没有设置宽度或高度属性 . 由于输入在SCSS文档中是硬编码的,因此很容易实施这些约束 .不要担心代码重复 . gzip压缩使得差异可以忽略不计 .
您可以为此创建自己的SCSS功能 . 将以下内容添加到config.rb文件中 .
然后你可以在你的CSS中使用它:
您需要编辑SVG文件并使用fill =“”替换标记中的所有填充属性
图标路径始终相对于同一config.rb文件中的images_dir参数 .
与其他一些解决方案类似,但这非常干净,可以保持您的SCSS文件整洁!
codeben article and demo
在这里显示的时间晚了,但是,如果你能够直接编辑SVG代码,我能够为SVG多边形添加填充颜色,例如,下面的svg呈现红色,而不是默认的黑色 . 我没有在Chrome之外测试过:
在某些(非常具体)情况下,这可以通过使用filter来实现 . 例如,您可以使用
filter: hue-rotate(45deg);
将色调旋转45度,将蓝色SVG图像更改为紫色 . 浏览器支持很少,但它仍然是一种有趣的技术 .Demo
这是我最喜欢的方法,但您的浏览器支持必须非常进步 . 使用mask属性可以创建应用于元素的蒙版 . 在任何地方,掩模都是不透明的,或者是实体的,底层图像显示出来 . 在透明的地方,底层图像被掩盖或隐藏 . CSS mask-image的语法类似于background-image . look at the codepen
mask
很多IF,但如果您的pre base64编码SVG启动:
然后base64编码的字符串将启动:
如果预编码的字符串开始:
然后这编码为:
两个编码的字符串都是相同的:
base64编码的怪癖是每3个输入字符变为4个输出字符 . 随着SVG的开始然后,6个字符的十六进制填充颜色恰好在编码块“边界”上开始 . 因此您可以轻松地进行跨浏览器JS替换:
但上面的tnt-rox回答是前进的方法 .