使用元素克隆SVG
使用元素克隆SVG
提问于 2012-11-12 18:04:31
在单独的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;回答 4
Stack Overflow用户
发布于 2012-11-12 20:35:22
它应该工作得很好。
这里有一个简单的例子，它在火狐，歌剧和Chrome中都工作得很好：http://jsfiddle.net/gew54/
来源：
<!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>Stack Overflow用户
发布于 2012-11-12 18:35:44
考虑到目前支持非常有限(仅限Gecko引擎)，这可以使用CSS3 element()函数来完成。
MDN文档还将您的案例指定为常见用例：
...使用这种方法的一个特别有用的场景是在HTML元素中呈现图像，然后将其用作背景。
Live Demo
Stack Overflow用户
发布于 2012-11-13 22:39:00
您可以使用svgWeb使其在webkit浏览器中工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13341679
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号