snapsvg를 사용하여 defs 요소로 정의 된 use 요소의 속성을 가져옵니다.

Question

저는 svgs를 처음 사용하고 snap.svg에 새로 도입되었습니다. 나는 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 인스턴스를 생성하기 위해 자바 스크립트를 사용하고 싶습니다. 그래서 나는이 같은 일부 자바 스크립트 사용 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/

다음

는 일부 코드입니다