태그를 감싸고 몇 개의 태그를 사용하여 연결된 d속성을 애니메이션하고 있습니다. 이것은 Chrome에서는 잘 작동하지만 Firefox에서는 애니메이션이 없습니다. 나는 상대적이고 절대적인 경로로 이것을 시도했습니다.pathdefsuse
<svg viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" />
</defs>
<use xlink:href="#a" />
<animate xlink:href="#a" attributeName="d" values="M0,20 H200 V70 H0z; M0,20 H200 V45 H0z" keyTimes="0;1" dur="1s" begin="0s" fill="freeze" />
</svg>이 작업을 수행하는 유일한 방법은 path모든 항목 을 반복 하고 애니메이션화하는 것입니까? 아니면 Firefox에서이 작업을 수행 할 수있는 방법이 있습니까?
@Robert Longson이 언급 한대로
경로를 반복해야한다고 생각합니다. 현재 SMIL은 요소가 가리키는 항목으로 변경되어을 다시 렌더링하지 않습니다.
따라서 애니메이션을 <path>태그 내에서 직접 전송해야 합니다.
<svg viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" >
<animate
attributeName="d"
values="
M0,20 H200 V70 H0z;
M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="0s"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>클릭 후 애니메이션 시작
<svg id ="svg1" viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" >
<animate
attributeName="d"
values="
M0,20 H200 V70 H0z;
M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="svg1.click"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다