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”，“＃ici”）

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

它应该可以正常工作。

这是一个在Firefox，Opera和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>

Answer 2

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

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

...使用它的一个特别有用的场景是渲染一个 HTML＆lt; canvas＆gt;中的图片元素，然后使用它作为背景

Live Demo

Answer 3

您可以使用svgWeb使其在webkit浏览器中运行。

SVG使用元素来克隆SVG

3 个答案:

Live Demo