SVG가 캔버스에있을 때 SVG 애니메이션이 작동하지 않습니까?

-3

애니메이션의 경우 SVG가 필요하고 애니메이션의 경우에는 "on-the-fly"변환이 필요합니다. 이것이 어떤 브라우저에서도 작동하지 않는 이유는 무엇입니까?SVG가 캔버스에있을 때 SVG 애니메이션이 작동하지 않습니까?

편집 :

그래서 조금 더 내가 그 SVG는 캔버스 태그 안에 넣어 경우, 애니메이션 같은 this는 오렌지 공을 그냥 여전히 남아 있음을, 작동하지 않는 것을 깨달았다 연구 후. 캔버스를 항상 새로 고침하면 애니메이션이 계속됩니다.

왜 SVG와 왜 캔버스가 필요합니까?

SVG는 훌륭한 형식이며 파일 크기가 매우 작기 때문에 멋진 애니메이션 이미지를 그릴 수 있습니다 (인터넷 트래픽).

캔버스는 자체 변환 (회전, 축척 등)하기가 매우 쉽기 때문에 SVG 컨테이너 인 캔버스입니다. 이미지를 45도 회전하고 3 배로 확대하고 싶습니다. SVG이기 때문에 화질은 여전히 우수 할 것이고 캔버스이기 때문에 한 줄의 코드로 변환을 수행 할 수 있습니다. 변환 행렬을 적용하면됩니다. 나는 끊임없이 내 캔버스 태그를 새로 고치면

SVG 자체에 애니메이션이 포함 된 경우

, 그것은 단지 작동합니다 : 난 내 질문에 대한 답을 발견하고이 같은

그래서 보인다.

나쁜 점은 내가 필요로하는 변환이 아핀 변환이 아니라 투영 변환이 있고 단순히 캔버스에서 지원되지 않는다는 것입니다. Here은 사영 변환의 몇 가지 예입니다 (이 부분은이 질문에 대한 답을 찾은 곳입니다).하지만 아직 끝나지 않았습니다. SVG 파일 위의 입력 이미지로 (애니메이션 사용) 시도하면 끊임없이 작업하지 않으면 효과가 없습니다. 그 4 개의 사각형 중 하나를 이동하십시오 (백그라운드에서 캔버스를 새로 고칩니다).

나는

편집 2 OK, WTF 정말 그 아래 표와이다 (이 불분명 나는이 질문에 -3 명성을 참조)이 아래로 일을 지 웁니다 희망? 그들 중 3 명이 있었고 나는 다른 사람들의 제안에 대한 나의 질문을 편집했다. 이 질문에 투표 한 사람 (4 명)은 왜 그렇게했는지 말할 수 있습니다. SVG 당신이 통제 할이 없습니다 SVG 파일로 변환을 적용의

출처

2011-12-19 vale4674

, 어떻게 당신은 어떤 브라우저에서하려고? – robertc

예. (this) [http://svg-whiz.com/svg/animation/autoOrient.svg]처럼 애니메이션을 정의한 SVG 파일. 그런 다음 회전 또는 비율 조정과 같은 변형을 적용해야합니다. 그러나 나는 아직도 그 svg가 움직이기를 원한다. 하지만 문제는 내가 svg가 애니메이션 화되지 않은 캔버스 태그 안에 src 태그를 넣으면 그대로 유지된다는 것입니다. 그리고 간단한 div에 svg를두면 애니메이션이되지만 캔버스 (변환)에서 옵션이 풀립니다. – vale4674

나는 의미가 있습니다. 코드를 보여주십시오. SVG에서 할 수없는'캔버스 '에서 어떤 변형을 할 수 있습니까? – robertc

Here is an example : 몰라요

<svg> 
    <g transform="scale(0.5) rotate(45) skewX(20) skewY(5)" > 
     <foreignObject width="400" height="400"> 
      <body xmlns="http://www.w3.org/1999/xhtml"> 
       <object data="http://svg-whiz.com/svg/animation/autoOrient.svg" 
         type="image/svg+xml" 
         width="400" height="400"> 
       </object> 
      </body> 
     </foreignObject> 
    </g> 
</svg>

출처

2011-12-20 08:53:29 robertc

제안 사항이 Tnx입니다. 이것을 사용하면 캔버스가 필요 없습니다. – vale4674

SVG가 캔버스에있을 때 SVG 애니메이션이 작동하지 않습니까?

답변

관련 문제