使用JQuery更改svg内的填充颜色
Change fill color inside svg using JQuery
我有一个嵌入在'img src'标签中的SVG图像。svg包含带有颜色的不同路径,每个路径用id分隔。我想用jquery
改变每个id的填充颜色下面是我用过的代码。但是颜色没有变。通过搜索很多,我发现,如果svg直接添加到html,它将工作。一个工作示例:http://jsfiddle.net/P6t2B/
但我怎么能实现它,如果它是通过'img src'添加svg??
html内:
<img src="images/hands.svg" width="70px"/>
JQuery代码更改填充颜色id 'l1':
$('#l1').css({fill:"#000000"});
样本SVG: <path id="l1" fill="#ffffff" d="M85.6,227.3L85.6,227.3c14.2-5.7,21.1-22,15.3-36.2l-35.4-87.5c-2.5-6.1-9.5-9.1-15.6-6.6
l-29.3,11.9c-6.1,2.5-9.1,9.5-6.6,15.6L49.4,212C55.1,226.1,71.4,233,85.6,227.3z"/>
<path id="l2" fill="#ffffff" d="M133.8,206.6L133.8,206.6c15.2-1.5,26.4-15.2,24.9-30.4L142.7,55.9
c-0.6-6.6-6.5-11.4-13.1-10.8l-31.4,3.1c-6.6,0.6-11.4,6.5-10.8,13.1l16.1,120.3C104.9,196.9,118.6,208.1,133.8,206.6z"/>
<path id="l3" fill="#ffffff" d="M181.8,219.6L181.8,219.6c15,3,29.7-6.8,32.7-21.8l22.8-151.7c1.3-6.5-2.9-12.8-9.4-14.1
l-31-6.2c-6.5-1.3-12.8,2.9-14.1,9.4L160,186.9C157,201.9,166.9,216.6,181.8,219.6z"/>
<path id="l4" fill="#ffffff" d="M227.8,247.1L227.8,247.1c13.9,6.5,30.5,0.4,37-13.4l58.1-142c2.8-6,0.2-13.2-5.8-16
l-28.6-13.4c-6-2.8-13.2-0.2-16,5.8l-59.4,137.7C206.6,219.7,208.3,238,227.8,247.1z"/>
<path id="l5" fill="#ffffff" d="M257.1,245.1l51.8-41l37,0.5l24.5,15.4L337.7,256l-90.1,90.2l-31.6,15.9
C216.1,362.1,184.1,325.9,257.1,245.1z"/>
这可能会奏效。
$('img.svg').each(function(){
var $img = $(this);
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$.get(imgURL, function(data) {
var $svg = $(data).find('svg');
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' style-color-black');
}
$svg = $svg.removeAttr('xmlns:a');
$img.replaceWith($svg);
}, 'xml');
});
来源:codedump
相关文章:
- 椭圆字幕选择,然后在Photoshop中使用Javascript填充颜色
- 如何访问svg内部id并让CSS更改该id的填充颜色
- 如何使用fabricjs在图像中插入填充颜色
- 边距和输入元素边框之间的填充颜色
- OL3:如何获取矢量图层的现有样式属性(例如填充颜色、描边颜色等)
- 无法重置 SVG 路径的填充颜色
- 当 y 轴反转时是否可以保持填充颜色
- 我可以用LeafLet更改GeoJSON LineString的填充颜色吗?
- 如何在单击 SVG 用作背景图像时更改其填充颜色
- HTML 5 画布填充颜色
- 美国地图拉菲尔插件自动更新和动态填充颜色
- 更改高图表散点图中的制造商填充颜色
- 更改 svg 填充颜色,然后绘制到画布
- 我可以根据图表中的给定阈值设置不同的填充颜色吗.js
- 无法在谷歌地图符号 (svg) 标记中填充颜色
- Highcharts 图形默认系列填充颜色覆盖状态填充颜色(包括 jsfiddle)
- 如何获取HTML5画布元素的填充颜色
- 更改d3.js节点的填充颜色
- Highcharts-悬停时x坐标之间的不同填充颜色
- OpenLayers 3根据要素参数值更改点填充颜色