질문을 이해할 수 있을지 모르겠지만 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)
이 https://developer.mozilla.org/en/SVG/Element/animateTransform (당신은 [animateTransform] 삽입 된 것으로 간주 되세요) 요소? – Sirko
정말 Dom 스크립팅으로 할 수 있습니다. 따라서 사용자 상호 작용에 대해 생각하는 것이 더 쉬워집니다. – rajkamal