SVG 경로에 애니메이션 파선을 표시하려고합니다. 경로는 d3를 사용하여 동적으로 생성되며 애니메이션은 양방향이 될 수 있습니다. IE를 제외한 모든 브라우저에서 작동합니다. Fiddle Link 내 문제는 SVG 애니메이션 과 비슷하지만 IE11에서 작동하지 않습니다 . 그러나 나는 거기에서 해결책을 얻지 못했습니다.
<path id="pathOriginal" class="animation" style="animation-direction:reverse" d="M535,73C33.75,73 33.75,-20 -467.5,-20" stroke="red" stroke-width="1.5px" fill="none">
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.animation {
stroke-dasharray: 4;
stroke-dashoffset: 4;
animation: dash 50s linear infinite;
-webkit-animation: dash 2s linear infinite;
}
마지막 수단은 자바 스크립트 마법을 사용하는 것입니다!
var myPath = document.getElementById('pathOriginal');
var i = 1000;
var intervalID = window.setInterval(myCallback, 20);
function myCallback() {
// Your code here
if (i == 0) { i = 1000}
myPath.setAttribute('stroke-dashoffset', i);
--i;
}<svg width="500" height="500" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(200,200)">
<path id="pathOriginal" class="animation" style="animation-direction:reverse" d="M535,73C33.75,73 33.75,-20 -467.5,-20" stroke="red" stroke-width="1.5px" fill="none" stroke-dasharray="4">
</path>
</g>
</svg>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다