Question

我尝试仅使用外部SVG文件（icons.svg）中的某些元素组，并使用所选组创建另一个SVG标记。尝试这种方式的原因是我不想为每个图标分别创建单独的SVG文件，因为最终会有大量的图标。

我更喜欢使用D3，目前我的HTML代码正在关注（它不起作用）：

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">
<head><script src="https://d3js.org/d3.v3.js"></script></head>
<body>
<script>

d3.xml("icons.svg").mimeType("image/svg+xml").get(function(error, xml) {
	if (error) throw error;
	iconSvg = xml.getElementsByTagName("svg")[0]; 
	
	sel = d3.select(iconSvg).selectAll("#icon2");
	
	var newSvg = d3.select("body").append("svg")  
        .attr({"id":"newicon", "width":50, "height":50
        }).append(sel);
});

</script>

＆＃13;

＆＃34; icons.svg＆＃34;文件内容如下：

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" version="1.1" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
	<g id="icon1" width="16" height="16" >
		<circle cx="7.5" cy="7.5" r="6.0" stroke="black" stroke-width="1" fill="#00AD5A" />
	</g>
	<g id="icon2" width="16" height="16" >
		<circle cx="7.5" cy="7.5" r="6.0" stroke="black" stroke-width="1" fill="#FF0000" />
	</g>
	<g id="icon3"  width="16" height="16" >
		<circle cx="7.5" cy="7.5" r="6.0" stroke="black" stroke-width="1" fill="#FF00FF" />
	</g>	
</svg>

＆＃13;

我感谢任何帮助！

Answer 1

我找到了解决问题的方法。我改变了行

sel = d3.select(iconSvg).selectAll("#icon2");

到此：

sel = d3.select(iconSvg).select("#icon2").html();

和

var newSvg = d3.select("body").append("svg")  
        .attr({"id":"newicon", "width":50, "height":50
        }).append(sel);

到此：

var newSvg = d3.select("body").append("svg")  
        .attr({"id":"newicon", "width":50, "height":50
        }).append("g").html(sel);

最终结果就是我想要的。

从外部SVG克隆某些元素组，并使用该组创建另一个SVG

1 个答案: