SVG使用元素克隆SVG [英] SVG use element to clone SVG
本文介绍了SVG使用元素克隆SVG的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以在单独的svg中使用整个其他svg？我想使用由d3生成的地图作为同一页面上的图标。这是我尝试的，但它不工作。
< svg id =map>
svg stuff here
< / svg>
< svg id =bar>
svg stuff here
< use xlink：href =＃mapheight =20width =30...>
< / svg>
也尝试了克隆方法，但是结束了整个svg在另一个svg，规模。例如。 makeicon（＃map，#icon）
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）
。 ，null）//删除原始svg的高度和宽度
.attr（height，null）
.attr（viewBox，0 0 20 30）; //尝试使其变小
return newNode;
解决方案
$ b
这里有一个简单的例子，在Firefox，Opera和Chrome中可以正常工作：
http ：//jsfiddle.net/gew54/
资料来源：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< style type ='text / css'>
svg {
width：100px;
height：100px;
}
< / style>
< / head>
< body>
< svg id =mapviewBox =0 0 100 100>
< circle cx =50cy =50r =20fill =lime/>
< / svg>
< svg id =barviewBox =0 0 100 100>
< use xlink：href =＃map/>
< / svg>
< / body>
< / html>
Is it possible to "use" a whole other svg within a separate svg? I want to use an map generated with d3 as an icon on the same page. This is what I tried but it doesn't work.
<svg id="map">
svg stuff here
</svg>
<svg id="bar">
svg stuff here
<use xlink:href="#map" height="20" width="30" ...>
</svg>
Also tried the cloning approach but ended up with an entire svg within another svg and couldn't get it to scale. eg. 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;
解决方案
It should work fine.
Here's a simple example that works fine in Firefox, Opera and Chrome: 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>
这篇关于SVG使用元素克隆SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
