0
한 경로에서 다른 경로로 변형되어야하는 SMIL 애니메이션을 작성하려고합니다. 경로는 Inkscape에 의해 생성됩니다. 두 모양 모두 Inkscape에 따라 17 개의 노드로 구성되어 있지만 SMIL 애니메이션은 제대로 작동하지 않습니다. 정의 된 1 초 후에 한 경로에서 다른 경로로 오른쪽으로 점프합니다.svg 모핑 SMIL 애니메이션이 즉시 한 상태에서 다른 상태로 점프합니다.
<svg width="34" height="34" version="1.1" viewBox="0 0 34 34" style="margin:2px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
\t <path id="check" d="m 5,8.25 0,17.5 C 5,27 6.25,27 6.25,27 l 17.5,0 c 0,0 1.25,0 1.25,-1.25 L 25,8.25 C 25,7 23.75,7 23.75,7 L 12.976695,7 6.25,7 C 6.25,7 5,7 5,8.25 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" id="boxUid">
\t \t \t <animate attributeName="d" to="m 5,18.1 0,0 7.5,8.9 0,0 12.5,-15.7 0,0 L 23.4,7 12.5,20.8 7,14.5 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" dur="1s" fill="freeze" begin="check.mouseenter"/>
\t \t \t <animate attributeName="d" to="m 5,8.25 0,17.5 C 5,27 6.25,27 6.25,27 l 17.5,0 c 0,0 1.25,0 1.25,-1.25 L 25,8.25 C 25,7 23.75,7 23.75,7 L 12.976695,7 6.25,7 C 6.25,7 5,7 5,8.25 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" dur="1s" fill="freeze" begin="check.mouseleave"/>
\t \t </path>
</svg> 불행하게도 내가 노드를 셀 수 아니에요 그것은 또한 크롬에서 점멸 (하지만 파이어 폭스에서) 그것 또한 (상자의 테두리를 마우스). 원칙적으로 나는 경로 요소가 어떻게 작동하는지 알고있다. 예 : MDNm dx dy은 특정 위치로 이동하고 이전 위치에 연결하지 않고 새 지점을 생성하는 이동 명령입니다. 그러나 m 5,18.1 0,0 7.5,8.9 0,0 12.5,-15.7 0,0은 무엇입니까?
브라우저가 적절한 애니메이션을하지 않는 이유는 무엇인가 때문에 17 개 노드가 각 모양에 있다는 것을 말한다 나는 잉크 스케이프를 신뢰해야 할 지식의 명백한 부족
? 무엇을 바꾸어야합니까?