我正在用D3构建svg。我想对路径元素使用裁剪,但是在为clipPath附加defs
部分时遇到问题。
这是我的代码:
function build_svg(div,width,height) {
var margin={left: 10, top: 20};
return div.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.append("defs")
.append("clipPath")
.append("rect")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", width)
.attr("height", height)
.insert("g","defs")
.attr("transform", "translate("+margin.left+","+margin.top+")");
}
我得到这个:
<svg width="100%" height="100%">
<defs>
<clipPath>
<rect x="40" y="10" width="651" height="214">
<g transform="translate(40,10)">
.....
</g>
</rect>
</clipPath>
</defs>
</svg>
但是我想要这个:
<svg width="100%" height="100%">
<defs>
<clipPath>
<rect x="40" y="10" width="651" height="214"></rect>
</clipPath>
</defs>
<g transform="translate(40,10)">
.......
</g>
</svg>
我的错误在哪里?
答案 0 :(得分:4)
现在您只有一条链,因此您要获得的结构就是预期的结构。
因此,与其代替,不如打破束缚。首先,命名SVG选择:
const svg = div.append("svg")
.attr("width", "100%")
.attr("height", "100%");
然后:
svg.append("defs")
.append("clipPath")
.append("rect")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", width)
.attr("height", height);
svg.append("g", "defs")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
请注意,您要append
而不是insert
这个团体。
这是演示,运行它并检查SVG:
function build_svg(div, width, height) {
var margin = {
left: 10,
top: 20
};
const svg = div.append("svg")
.attr("width", "100%")
.attr("height", "100%");
svg.append("defs")
.append("clipPath")
.append("rect")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", width)
.attr("height", height);
svg.append("g", "defs")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
};
const div = d3.select("#myDiv");
build_svg(div, 200, 200)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="myDiv"></div>
您将看到以下结构:
<svg width="100%" height="100%">
<defs>
<clipPath>
<rect x="10" y="20" width="200" height="200"></rect>
</clipPath>
</defs>
<g transform="translate(10,20)"></g>
</svg>