私はsvgsとブランドsnap.svgする新に新たなんだsnap.svg

Question

でDEFS要素によって定義されている使用要素の属性を取得します。私は、SVG内の要素を生成する上で働いているとで動作するように次き：

<svg width="600" height="400" style="shape-rendering: geometricPrecision; position: absolute; 
     left: 0; top: 0;"> 
     <defs> 
      ... 
      <circle id="dot" r="10" stroke-width="2"></circle> 
     </defs> 
    </svg> 

私は異なる位置に円#dotのmutlipleインスタンスを作成するためにJavaScriptを使用します。だから私はこのようないくつかのJavaScriptの使用snap.svgあります

var dot = svg.use("dot"); 
var r = dot.attr("r"); 
dot.attr({ x: shapeData.X-r, y: shapeData.Y-r, class: "dot" }); 

を私は半径、rのために取得していた値は、nullです。円、幅、高さ、塗りつぶしの色などを記述する値にはどのようにアクセスできますか？

Answer 1

使用要素はSVGで仕事のやり方は、彼らは基本的には元のオブジェクトへのポインタであるです。キャンバスにそのドットのクローンを使用して配置すると、クローンには定義された半径がありません。それは、定義された半径を有するドットを指す。

あなたがしなければならないことは私にはっきりとは分かりませんが、これにアプローチする正しい方法は、この目的のために使用できるドットへの参照を得ることです。後でドットを複製して他の属性を追加することができます。

それはさておき、あなたはちょうどあなたが必要とするスナップ多くのものが欠けているが、あなたはちょうど私達にスニペットを与えているので、多分それはです。

ここにいくつかのコードです：

<svg id="svg" width="600" height="400" style="shape-rendering: geometricPrecision; position:absolute;left: 0; top: 0;"> 
<defs> 
    <circle id="dot" r="10" stroke-width="2"></circle> 
</defs> 
</svg> 

JS：ここ

// reference to svg 
var svg=Snap('#svg') 

// reference to dot, stored in a 
var a=svg.select('[id="dot"]') 

// what's the radius of a? 
var r=a.attr('r') 
alert('The radius is '+r) 

// clone a and add it to the svg 
b=a.use() 
svg.append(b) 

// give b some attributes 
b.attr({x:100,y:50}) 
console.log(b.attr()) 

はフィドル：https://jsfiddle.net/ksy7mLsx/1/

は、