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

svgWebを使用して、Webkitブラウザーで機能させることができます。

于 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 に答える