重複した入れ子になったSVG要素の操作

Question

snap.svgで作業中に問題が発生しました。

メインSVG要素をネストSVG要素として使用したいと思います。

<svg width="71" height="101" viewBox="0 0 71 101"> 
<defs> 
    <rect id="a" width="70" height="100" rx="5"/> 
    <mask id="d" width="70" height="100" x="0" y="0" fill="#fff"> 
    <use xlink:href="#a"/> 
    </mask> 
    <rect id="b" width="70" height="100" rx="5"/> 
    <mask id="e" width="70" height="100" x="0" y="0" fill="#fff"> 
    <use xlink:href="#b"/> 
    </mask> 
    <pattern id="f" width="6" height="5" x="-6" y="-5" patternUnits="userSpaceOnUse"> 
    <use transform="scale(.5)" xlink:href="#tipstercard-c"/> 
    </pattern> 
    <image id="c" width="12" height="10" xlink:href="data:image/png;base64,..."/> 
</defs> 
<g fill="none" fill-rule="evenodd" transform="translate(.338 .194)"> 
    <use fill="#212120" stroke="#FFF" stroke-width="4" mask="url(#tipstercard-d)" xlink:href="#a"/> 
    <use fill="url(#f)" fill-opacity=".1" stroke="#FFF" stroke-width="4" mask="url(#e)" style="mix-blend-mode:luminosity" xlink:href="#b"/> 
    <path fill="#FFF" d="M20.22 47.784v1.53h-1.344v2.923c0 .593.013.937.04 1.035a.42.42 0 0 0 .174.241c.091.064.2>... 

私はfragments['card'].select('svg').clone();ようSTHを実行しようとしましたが、これは、その結果：TypeError: Failed to construct 'URL': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

私はfragments['card'].select('svg').toDefs();以下も試してみましたが、これは、その結果：DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.のは、このネストされた1は、このような構造を持っているのいずれかを言ってみましょう

スナップではどうすればいいですか？私が使用するために必要なよう

EDIT は思え：

Surface.append(fragments['card']); 
    const Card = Surface.select('#card'); 
    Card.toDefs(); 
    const CardDef = Surface.select('#card'); 
    CardDef.use().attr({...}); 

今これはfragments['card'].select('svg').toDefs();動作しない理由の質問は、上記のコードではありませんか？ fragments['card'].select('svg')を直接使用できないのはなぜですか？

Answer 1

フラグメントにはSnapメソッドの概念がないため、clone（）などのメソッドは機能しません。最初にそれらをDOMに追加する必要があります。また、フラグメントがDOM内に完全には存在しないため、DOM SVG要素で使用できる共通のsvgメソッドに問題があります。

したがって、fragment.select（ 'svg'）.clone（）は動作しません（クローンはSnapメソッドなので）。まず、「Snapify」する必要があります（スナップ要素、つまりsvg要素のラッパー）。

ですから、DOMに追加following..firstような何かをする必要があるだろう...

Surface.append(fragment.select('svg')); 

今そのDOMに、あなたはそれをSnapifyし、（今、私たちとしてそれを複製することができこの要素でSnapメソッドを使用できます）。

Surface.select('someId').clone(); 

注意、あなたがどこかにDOM要素を持っている場合、あなたもこれをそのままDOM要素を保持しますが、ちょうどスナップを追加

var snapElement = Snap(someDomElement); 

を行うことによって、スナップ要素にそれを回すことができますそれを囲むラッパーであり、これをSnap要素として返します。

あなたは正しいコードを自分で見つけました。主な答えは、メソッドを呼び出すときに要素がSnap要素でなかったことです（またはDOMに追加されました）。

注：DOMに追加せずにフラグメントをスナップすることはできますが、主なDOMにない限り、新しい方法はありません。しかし、フラグメントへの参照を保存するだけで便利です要素は後で追加されます。