5

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

4 回答 4

3

它应该可以正常工作。

这是一个在 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>
于 2012-11-12T12:35:22.000 回答
0

You can use svgWeb to make it work in webkit browsers.

于 2012-11-13T14:39:00.477 回答
0

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

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

...使用它的一个特别有用的场景是在 HTML <canvas> 元素中呈现图像，然后将其用作背景。

现场演示

于 2012-11-12T10:35:44.213 回答
0

从 SVG 2 开始，[ xlink:href ] 属性被弃用，取而代之的是 [ href ]。

<use xlink:href="#myId" />

已弃用：不再推荐使用此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作。信息...

<use href="#myId" />


<svg viewBox="0 0 30 10" width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
  <use href="#myCircle" x="10" fill="blue"/>
  <use href="#myCircle" x="20" fill="white" stroke="red"/>
  <!--
stroke="red" will be ignored here, as stroke was already set on myCircle.
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
  -->
</svg>

演示-codepen.io

于 2021-09-03T20:43:32.977 回答