我在 defs 标签内将 3 个圆圈分组在一起，以便可以在 SVG 中看到它们。我还被建议使用 use 标签，这样我就可以看到在 defs 中定义的形状，并在 SVG 中的任何位置重新创建它。我正在使用 D3.js 创建它们并将它们附加到数据中。但是，我的问题是，当我使用 use 标签时，在我看来，每次我想要显示 defs 中的形状时，我都会创建一个新的 SVG标签。我的问题是:是否可以在不使用 use 标签的情况下使用 defs 标签？第二个问题是:如何在仅一个 SVG 内多次在 defs 标记中显示该形状，而无需每次都创建 SVG 。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
</head>
<body>
<div id ="mainSVG">
<svg id = "packSVG" width = "1160" height = "620" style = "outline: thin solid black"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id= "mySymbol">
<circle cx="200" cy="70" r="25" fill="red" />
<circle cx="170" cy="80" r="20" fill="red" />
<circle cx="230" cy="80" r="20" fill="red" />
</symbol>
</defs>
</svg>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var dataset = [20, 60, 90, 120];
var display = d3.select("body").select("#mainSVG").select("#packSVG").selectAll("use")
.data(dataset).enter().append("use")
.attr("xlink:href","#MySymbol")
.attr("transform", function (i) { i+=50; return "translate(" + i + "," + i + ")";});
</script>
</body>
</html>
有人可以帮忙解决这个问题吗？预先非常感谢您。
最佳答案
您可以使用 g 元素定义圆组，如下所示，无需创建多个 svg。 JSFiddle
HTML
<svg id="mainSVG" width="600" height="500">
<defs>
<g id="mySymbol">
<circle cx="200" cy="70" r="25" fill="red" />
<circle cx="170" cy="80" r="20" fill="red" />
<circle cx="230" cy="80" r="20" fill="red" />
</g>
</defs>
</svg>
Javascript代码
var dataset = [20, 60, 90, 120];
var display = d3.select("body")
.select("#mainSVG")
.selectAll("use")
.data(dataset)
.enter()
.append("use")
.attr("xlink:href","#mySymbol")
.attr("transform", function (i) { i+=50; return "translate(" + i + "," + i + ")";});
请注意，您的代码中有拼写错误。创建 use 元素时，id mySymbol 被错误拼写为 MySymbol。
关于javascript - 附加 defs 标签并在 D3.js 的 SVG 中使用它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27383179/