2012-02-20 3 views
1

예를 들어, 요소의 transform을 변경하고 싶습니다. 해당 요소의 SVGTransform 개체를 변경하려고합니다. 그러나 요소의 SVGTransform 객체를 가져 오는 가능성 (함수)을 어떻게 알 수 있습니까?SVGTransform 객체를 반환하는 모든 메서드를 분리하는 방법은 무엇입니까?

MSDN 메서드 참조로 앞뒤로 검색했습니다 : http://msdn.microsoft.com/en-us/library/windows/apps/hh453568.aspx.

좋은 방법이 있습니까?

+0

이 https://developer.mozilla.org/en/SVG/Element/animateTransform (당신은 [animateTransform] 삽입 된 것으로 간주 되세요) 요소? – Sirko

+0

정말 Dom 스크립팅으로 할 수 있습니다. 따라서 사용자 상호 작용에 대해 생각하는 것이 더 쉬워집니다. – rajkamal

답변

0

질문을 이해할 수 있을지 모르겠지만 transform 속성을 수정하는 것은 매우 간단합니다. jQuery 또는 유사한 라이브러리를 사용하면 특정 SVG 라이브러리가 필요하지 않습니다. 예를 들어 http://jsfiddle.net/LxAWd/

:

내 JSFiddle를 참조

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <rect transform="rotate(15)" id="r" x="10" y="10" width="20" height="100"/> 
</svg> 

JS 코드 : 새 SVG 개체를 만들거나 더 복잡한 작업을 수행해야하지만 경우

$('#r').attr('transform', 'skewX(40)') 

, 특정 SVG 라이브러리를 사용 하시길 권장합니다 : https://svgdotjs.github.io/ 나는 그것을 사용했으며 매우 훌륭합니다.

당신은 (공식 사이트에서 추출 코드)에 다음과 같은 작업을 수행 할 수 있습니다 :

// create svg drawing 
    var draw = SVG('drawing') 

    // create image 
    var image = draw.image('images/shade.jpg') 
    image.size(600, 600).y(-150) 

    // create text 
    var text = draw.text('SVG.JS').move(300, 0) 
    text.font({ 
     family: 'Source Sans Pro' 
    , size: 180 
    , anchor: 'middle' 
    , leading: 1 
    }) 

    // clip image with text 
    image.clipWith(text) 
관련 문제