SVG 애니메이션을 사용하여 폴리 라인의 모양 애니메이션하기

폴리 라인 도구를 사용하여 특정 모양을 정의하기 위해 HTML의 SVG를 사용하고 있습니다. 단추를 누르고 몇 초에 걸쳐 특정 모양의 모양을 다른 모양으로 애니메이션화하려고합니다.SVG 애니메이션을 사용하여 폴리 라인의 모양 애니메이션하기

나는 폴리 라인 포인트 속성을 변경하기 위해 애니메이트 도구를 사용해 왔지만 지금까지 완벽하게 작동하는 해결책이나 무언가를 찾지 못했습니다.

가능합니까? 그렇지 않다면 실행 가능한 대안이 있습니까?

출처

2012-01-27 howardrocks

이 라이브러리를 확인하십시오 : http://raphaeljs.com/. SVG 파일을 매우 잘로드 할 수는 없습니다 (대부분 기능적인 플러그인이 있습니다). 그러나 애니메이션에서는 놀랍습니다. – Blender

"완벽하게"작동하는 솔루션을 찾을 수 없다고 말하면됩니다. 무슨 일을하고 어떤 문제를 발견했는지 설명해 주시겠습니까? 그것은 다른 사람들이 당신의 필요가 무엇인지를 알기에 충분하지 않은 해결책을 제시하는 데 도움이 될 수 있습니다. – Phrogz

SVG가 각 (제어점)을 독립적으로 이동하기 때문에 같은 수의 점을 가진다면 트윈에 폴리선 (베 지어 곡선 등이있는 경로 포함)을 제공 할 수 있습니다. 도형에 제어점 수가 같지 않은 경우 일부만 일치시킬 수 있지만 그래픽 편집기는이를 "수정"합니다.

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="5cm" height="5cm" viewBox="0 0 1000 1000" 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<polyline stroke="red" stroke-width="3" fill="none"> 
    <animate attributeName="points" dur="5s" repeatCount="indefinite" 
    from="100,100 900,100 900,900 100,900 100,100" 
     to="200,200 800,500 800,500 200,800 200,200" 
    /> 
</polyline> 
</svg>

출처

2012-01-28 05:31:15 pascal

어떻게 그 svg의 공중 선회에 이것을 할 수 있습니까? 나는 SVG를 어떻게 움직일 것인가? –

SVG 애니메이션을 사용하여 폴리 라인의 모양 애니메이션하기

답변

관련 문제