![](/img/trans.png)
[英]Clone certain group of elements from external SVG and use that group to create another SVG
[英]How to clone a group of elements in svg and show the clone in specified coordinate?
SVG
<svg width="200" height="200">
<g id="group">
<rect x="10" y="10" width="50" height="20" fill="teal"></rect>
<circle cx="35" cy="40" r="20" fill="red"></circle>
</g>
<circle id="ref_cycle" cx="135" cy="140" r="2" fill="green"></circle>
</svg>
我可以用:
var copy = d3.select("#group").clone(true).attr("transform", "translate(20,00)");
擁有<g id="group">
的副本並將其顯示在頁面中。
但我希望這個克隆的組red "circle"
中心與 SVG 中的"ref_cycle"
中心對齊,但不會丟失組形狀。 我怎么能在代碼中做到這一點?
多謝。
這是我這邊的工作代碼,有一些評論,以防有人需要。
var ref_cycle = d3.select("#ref_cycle");
//^ get the reference cycle obj
var clone_template = d3.select("#group");
//^ get the template obj, for later select and clone use
var clone_trans_x = ref_cycle.attr("cx") - clone_template.select("#inner-ref").attr("cx");
var clone_trans_y = ref_cycle.attr("cy") - clone_template.select("#inner-ref").attr("cy");
// to make select be simple, add an id tag in svg group's <circle id="inner-ref" ></circle> first.
// do the math on offset of two objects
clone_template.clone(true).attr("transform", "translate(" + [clone_trans_x, clone_trans_y] + ")");
// clone it
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.