SVG 使用元素来克隆 SVG

Question

是否可以在单独的 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;

Answer 1

考虑到目前的支持非常有限（仅限 Gecko 引擎），这可以使用 CSS 3 函数来完成element()。

MDN 文档还将您的案例指定为常见用例：

...使用此功能的一个特别有用的场景是在 HTML <canvas> 元素中渲染图像，然后将其用作背景。

现场演示