我关注使用 jQuery 修改 svg 文件并为我工作了 50%。
我想在屏幕上显示许多图像(在 Inkscape 中绘制的 SVG),我已经有了。问题是我想为每个图像绘制不同的颜色,如果我有一个黑色背景的圆圈,我想绘制红色或绿色。而且不管每个svg的内部元素,都会全部绘制。例如,如果我有一个 5 个正方形的 svg 应该都涂成相同的颜色
图像可以重复,我可以有 5 个圆形,1 个红色,1 个蓝色,2 个绿色和 1 个#XXX
我试过了
function SetSvg(div,name,color){
var dir="../images/";
div.svg({
onLoad: function()
{
var svg = div.svg('get');
svg.load(dir+name+'.svg', {addTo: true, changeSize: false});
},
settings: {}}
);
//comment is bad intent :(
//div.find("path, polygon, circle, square").attr("fill", "#ccc");
//div.children('svg>g>rect').attr('fill','#FFF');
//div.attr('fill','#DDD');
//var svg = div.svg('get');
//$('rect', svg.root()).attr('stroke', 'red');
//and
//$('rect').attr('fill','green')
}
但没有一个工作。
问题可能是inkscape为所有元素创建ID,重复图像,ID冲突
这是一个测试文件
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 200 200"
width="200"
height="200"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-852.36218)"
id="layer1">
<path
d="m 187.26672,105.16928 a 79.025597,72.799339 0 1 1 -158.051197,0 79.025597,72.799339 0 1 1 158.051197,0 z"
transform="matrix(1.2329032,0,0,1.3383488,-33.450822,811.609)"
id="path3755"
style="fill:#000000;stroke:#ffffff;stroke-width:4;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none" />
</g>
</svg>
编辑 1
function SetSvg(div,name,color){
var dir="../images/";
div.svg({
onLoad: function()
{
var svg = div.svg('get');
svg.load(dir+name+'.svg', {addTo: true, changeSize: false});
},
settings: {}}
);
$('path').attr('fill','red') //NOT WORKS IN LOAD
}
function svgClick(){
$('path').attr('fill','green') // YES WORKS
});
}
但我在加载时想要它,而不是在你点击时