是否可以在单独的 svg 中“使用”整个其他 svg？我想使用 d3 生成的地图作为同一页面上的图标。这是我尝试过的，但它不起作用。
<svg id="map">
svg stuff here
</svg>
<svg id="bar">
svg stuff here
<use xlink:href="#map" height="20" width="30" ...>
</svg>
还尝试了克隆方法，但最终将整个 svg 放在另一个 svg 中，并且无法缩放。例如。 makeicon("#map", "#icon")
function makeicon(source, destination) {
//https://groups.google.com/forum/?fromgroups=#!topic/d3-js/-EEgqt29wmQ
var src = d3.select(source);
var dest = d3.select(destination);
if (!src.empty() && !dest.empty()) {
var newNode = d3.select(dest.node().insertBefore(src.node().cloneNode(true),
src.node().nextSibling))
.attr("id", "newnode")
.attr("width", null) // remove height and width of original svg
.attr("height", null)
.attr("viewBox", "0 0 20 30"); // try to make it smaller
return newNode;
它应该工作正常。
下面是一个在 Firefox、Opera 和 Chrome 中运行良好的简单示例：http://jsfiddle.net/gew54/ http://jsfiddle.net/gew54/
Source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
svg {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<svg id="map" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="20" fill="lime"/>
</svg>
<svg id="bar" viewBox="0 0 100 100">
<use xlink:href="#map" />
</svg>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
