animateTransform을 사용할 때 x-y 회전 지점을 지정하는 방법은 무엇입니까?

Question

animateTransform을 사용하여 SVG 이미지를 계속 회전시키고 싶습니다. 그래서 여기에 우리가 간다 :

<?xml version="1.0" encoding="utf-8"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="1024px" height="768px" enable-background="new 0 0 100 100" xml:space="preserve"> 
    <g transform="translate(100, 100)"> 
     <rect fill="#FE9FFF" width="100px" height="100px"> 
      <animateTransform attributeName="transform" type="rotate" 
       from="0" to="360" dur="20s" repeatDur="indefinite"/> 
     </rect> 
    </g> 
</svg> 

이것은 작동한다.

Now : 블록을 왼쪽 위 모서리가 아닌 중심을 중심으로 회전하도록 위와 같이 변경하고 싶습니다. 내가 그 중심을 정적으로 블록을 회전 할 경우, 나는이 작업을 수행 할 수 있다는 사실을 알고 :

<g transform="rotate(30, 50, 50)"> 
    <rect fill="#FE9FFF" width="100px" height="100px"> 
    </rect> 
</g> 

내 질문은 - 내가 블록의 중심을 연속 회전 애니메이션을 관리 어떻게? 나는 spec과 두번째 other related questions을 보았습니다. 그러나 제공된 설명을 구현하는데 문제가 있습니다.

미리 감사드립니다.

Answer 1

http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement

'의'과 '을'에서 '속성 값이 소정의 변형 형태로 사용할 같은 구문을 사용하여 표현 취
(...)
을 유형에 대해 = "회전"각 값 < 회전 각도> [< CX> < CY>]

당신은 회전 중심을 지정할 수있는 경우에 사용하면 프로로 표현 2 개의 추가 값 cx와 cy를 표시하십시오. 또한 Firefrox,

<rect fill="#FE9FFF" width="100px" height="100px"> 
    <animateTransform attributeName="transform" type="rotate" 
     from="0 50 50" to="360 50 50" dur="20s" repeatDur="indefinite"/> 
</rect> 

그것은 오페라, 사파리와 크롬의 최신 버전에서 작동 :

그래서, 코드의 당신의 조각, 나는 속성 "을"은 "로부터"에서 "50 50"을 추가하고 4 베타와 바틱.

Answer 2

분명히 말하면 : 우리가 달성하고자하는 것은 자체가 번역되는 센터를 중심으로 회전하는 것입니다. 만약 내가 < animateTransform 타입 = > 회전 <animateMotion>, 또는 < animateTransform 타입 = 번역 > 동시 번역을 수행 할 수 없습니다 찾았어요. 그것 (최신 크롬이나 파이어 폭스)은 회전 중심을 원하는대로 보간하지 않으므로 대신 "루프 드 루프"가 발생합니다. 그러나 간단한 <을 사용하여 x, y 좌표 각각에 >을 애니메이트하면 원하는대로 작동합니다. 이 경우 < animateTransform type = rotate >은 from = 매개 변수를 시작 각도로 설정하고 x를 시작하고 y 위치를 시작하고 to = 매개 변수를 끝으로 설정하는 한 x, y 경로를 따라 중심을 보간합니다. 값.