1538人阅读
一、接上篇
前文介绍了SVG Sprites身材和内涵，顺大便客观的评价了SVG Sprites比font-face高几层楼的事实（）。但是呢，人总是这样，总是容不得说自己现在使用东西的不好。于是乎，不经意间戳动了点小小的自尊。导致文章也没细读就大肆反驳：SVG图标颜色要内联设置，不像font-face那样好控制！而且还不只一位兄弟这么说。
心中默念三遍，切勿浮躁，切勿浮躁，切勿浮躁。其实呢，我并不忍心说实话的：SVG图标颜色控制要比font-face有过之而无不及。
以下是颜色相关特点（不包括图片填充，滤镜什么的）：
1. CSS可控制
2. 颜色可继承
3. 支持当前色currentColor
4. 支持渐变色（部分）
二、SVG内联图标颜色CSS可控制
在CSS中使用fill属性即可，例如：
svg { fill: #369; }
所以，一般而言，SVG图标元素上是没有fill属性的，就好像使用font-face的元素一般不会有style=&color:#369&这样，都是为了方便CSS控制。
三、SVG内联图标颜色可继承
祖先的fill颜色设置SVG后辈元素继承，例如：
body { fill: #369; }
则，如果没有其他fill干扰，body标签下的所有SVG图标颜色都是#369.
四、SVG内联图标支持当前色currentColor
currentColor就是使用当前该元素所处环境的文字颜色，例如：
li { color: #369; }
li & svg { fill: currentC }
这里的currentColor就是#369也就是当前SVG平级的文字的颜色。一例胜前言，
您可以狠狠地点击这里：
demo页面的HTML结构是：
其中，颜色方面：
li { color: #369; }
svg { fill: currentC }
也就是li设置颜色，svg使用当前色currentColor, 于是乎，我们会看到demo中，SVG图标和文字都是一样的颜色#369, 见下截图（IE9浏览器下）：
currentColor就是当前色，比方说SVG和文字都在a标签里面，则图标就是链接色，很方便的来，就像是普通文字一样，使用起来与font-face无异，很方便。
为了让大家进一步感受下这个世界的善意，demo中还有颜色可设置的操作，见下图：
更改颜色会改变上面对应序号li元素的颜色，例如，我们选几个华丽的web色，然后：
总而言之，言而总之，SVG图标颜色控制很简单，就跟设置文字一样。
五、SVG内联图标支持渐变色
前面3个点都是跟font-face平起平坐的，这里这个就是超过font-face的地方。
CSS中的fill属性，不仅可以跟随颜色值，还能是页面上的SVG元素，自然，也是可以是渐变元素。
例如，页面上有下图所示的（IE9+可见）SVG元素（线性渐变）：
我们只需要页面上存在如下的SVG代码：
&svg width=&0& height=&0&&
&linearGradient x1=&0& y1=&0& x2=&1& y2=&1& id=&lineGradient&&
&stop offset=&0%& stop-color=&#000000&&
&/linearGradient&
然后，CSS方面：
svg { fill: url(#lineGradient); }
然后小图标的颜色就是渐变了啦！
自然，特定条件下你还可以fill图片，也就是文字遮罩效果。
而font-face要实现文字渐变，Chrome可以，FireFox和IE呢？
目前，IE浏览器，包括IE11，貌似CSS中fill不支持url()锚定，但FireFox支持，所以还是比font-face更上一层楼！
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：104200次
积分：1054
积分：1054
排名：千里之外
转载：67篇
(2)(1)(6)(12)(6)(6)(5)(3)(1)(1)(1)(1)(1)(3)(1)(1)(1)(4)(3)(6)(9)亲们该页面内会员们分享的“作品”，版权为才华横溢的原作者们所有滴，不得商业使用！
9种不同的图像和填充纹理图片效果，分别使用html5 svg,html5 canvas和css3背景技术完成，想学习的就来吧！
下载资源：2 次
错误提交：
大小：1.85M
================关于优设记================
“优设记“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博：同步网站更新内容，订阅jquery资源 @吐槽优设记，欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接：
非特殊说明，本文版权归原作者所有，转载请注明出处
我当前G币余额：0
已下载次数：2
注：点击右侧分享按钮并且留下评论自动+10G币
所需G币：20
下载提示：由于文件较小，请直接点击下载，不支持迅雷等下载工具。
不足，你可以通过
你可以直接下载，不消耗G币
&浙ICP备号-1 & Copyright (C) 2013
All Rights Reserved 您是第2717645位访客！Im converting a d3 svg object with use of canvg library to an canvas and display it as an image (png).
The resulting image has a transparent background, which is not what I want. I need this with a white background.
So i tried to set the background color of svg element. When viewing svg element it is fine, but the converted image is still transparent.
I also tried, to alter background of the canvas object, but this is also not working.
first approach (svg):
var svg = d3.select(".chart").append("svg").attr("style","background:")...
second aproach (canvas):
canvg(document.getElementById('canvas'), $("#chart").html());
var canvas = document.getElementById('canvas');
canvas.style.background = 'white';
var img = canvas.toDataURL('image/png');
document.write('&img src="' + img + '"/&');
Does anyone know, on which object I have to set the background color, in order to get it converted properly in png image ?
Edit: With the information mentioned in ThisOneGuys answers, I found this solution.
var svg = d3.select(".chart").append("svg") ...
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "white");
With the appended rect, I get what I need :)
解决方案 I have ran in to this before. As you know the CSS doesn't pass get put in the DOM, so it's not read by the conversion. So you have to do inline styling instead. But the way you are currently doing it is incorrect.
So instead of using :
.attr("style","background:").
You have to set the style like this :
.style('fill', 'white');
That should work fine :)
本文地址： &
使用canvg库将d3 svg对象转换为画布并将其显示为图像（png）。
生成的图像具有透明背景，这不是我想要的。我需要这个与白色背景。
所以我试图设置svg元素的背景颜色。当查看svg元素是很好，但转换后的图像仍然是透明的。 我也试过修改canvas对象的背景，但是这也不行。
第一种方法（svg）：
var svg = d3.select（“。chart”）append（“svg”）。attr（“style”，“background： ）...
第二个aproach（canvas）：
canvg（document.getElementById（'canvas'），$（“＃chart”）。html（））;
var canvas = document.getElementById（'canvas'）;
canvas.style.background ='white';
var img = canvas.toDataURL（'image / png'）;
document.write（'& img src =“'+ img +'”/&'）;
有人知道，我必须在哪个对象上设置背景颜色，适当地在png图像？
编辑：根据ThisOneGuys中提到的信息，我找到了这个解决方案。
var svg = d3.select（“。chart”）。append（“svg”）...
svg.append（“rect”） .attr width“，”100％“） .attr（”height“，”100％“） .attr（”fill“，”white“）;
使用附加的rect，我得到我需要的：）
解决方案 我已经跑过去了。因为你知道CSS不会在DOM中传递get，所以它不会被转换读取。所以你必须做内联样式。但是你目前做的方式是不正确的。
因此，而不是使用：
.attr ，“background：”）。
您必须设置如下样式：
.style（'fill'，'white'）;
这应该可以正常工作：）
本文地址： &
扫一扫关注官方微信教你如何让SVG图像背景在Html中变透明！
在如果把SVG嵌入到html网页中常常会发现SVG的周围本来因该透明的部分在html中会变成白色，看上去比较生硬，很是不舒服！
查了很多资料终于找到了解决方案。
方法如下：
在html中用"&embed&"
标签将svg图像嵌入，然后再添加一格wmode的属性，并将其值设为transparent。即"&embed
src="XXX.svg"
wmode="transparent"&"
我写了个小例子来测试了一下，这个测试需要两个文件，一个html，一个svg文件。
源代码如下：
1。html代码：
----------------------------------------------------------
&title&svg背景透明测试&/tilte&
&& &/head&
&&body bgcolor="blue"&
style="position: left:250; top:250"&
is test text! To assure that svg will be right Position!
src="SVGBGTest.svg"& width="800px"; height="600px"
wmode="transparent"&
===============================================================
svg代码：注意该文件存储名需与html中src属性下的文件名一致！本例为SVGBGTest.svg
---------------------------------------------------------------------
"&?xml version="1.0" encoding="utf-8"?&
&svg width="500" height="500" x="0" y="0"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"&
xmlns:a="/svg10-extensions"
xmlns:qb="http://www.treebuilder.de/svg/qbert"&
&Author: Gambey
&All Rights Reserved!
Goal:Test background in html
&script type="text/javascript" &
&function moving(evt)
&&document.getElementByIdx("rect01").setAttribute("cx",evt.clientX);
&&document.getElementByIdx("rect01").setAttribute("cy",evt.clientY);
&&circle id="rect01" cx="0" cy="0" r="50"
onmousemove="moving(evt)" style="fill: fill-
opacity:0.5"/&
-----------------------------------------------------------
由上代码可以看出，我在svg代码中并没有设置有关svg背景的代码，你还可以将鼠标放在左上角的圆形上，然后四处移动这个圆来看
ps：由于blog会自动过滤掉标签，所以都用引号引起来，如果您想复制请去掉引号。本来SVG是一个页面的形式嵌入到html中的，如果真的不能把svg背景改成透明也是理所应当的事情，但是想必w3c，考虑到了svg
应用于网页必定少不了与html打交道，于是实现了这种情况。真是更喜欢svg了！最后感谢ttmovey网友提供的帮助！
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。