브라우저에서 작동하지 않는 애니메이션 된 SVG 선 그리기

Question

점진적으로 그려진 "빛나는"선 효과를 만들기 위해 SVG 필터와 stroke-dasharray 접근 방식을 사용하는 애니메이션을 만들려고합니다. 연구의 꽤 후에 내가 함께 종류의 작동 뭔가 넣을 수 있었다 :

JSFiddle합니다 (SVG 경로가이 너무 큰 만들 SO 조각을)

나의 시도 솔루션은 좌표의 두 세트를 사용 첫 번째는 선 그 자체이고, SVG 글로 필터가 적용된 동일한 경로가 뒤 따른다. 대부분의 경우, 애니메이션은 외관과 같이 내가 좋아하는 것까지 괜찮아 보인다.

애니메이션은 명백히 리소스를 많이 사용하며 FireFox 및 Safari에서 매우 까다 롭습니다. 이러한 브라우저에서 원활하게 실행되는 동안이 동일한 애니메이션 "빛나는 선"효과를 얻으려면 어떻게해야합니까? 이와 같은 커다란 좌표 세트로 인해 성능이 저하되는 방식이 있습니까? 아니면 두 세트의 경로를 사용하지 않고 광선 효과를 얻는 더 좋은 방법이 있습니까?

또한 R2-D2의 이미지는 사용하지 않지만 실제 선 그리기는 비슷한 모양의 큰 세트로 구성되어 있으므로 대표적인 예가됩니다.

저는 애니메이션 SVG로 작업하는 것이 처음이었습니다. 여기에 대한 접근 방식은 약간 둔할 수도 있습니다. 어떤 도움이라도 대단히 감사합니다.

Answer 1

성능을 조정하기 위해 할 수있는 몇 가지 최적화가 있습니다.

이

<svg xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs> 
    <g id="lines"> 
    <!--one set of paths, no classes, no attributes besides d--> 
    <path d="..." /> 
    </g> 
    <filter id="glow"> 
    <feGaussianBlur stdDeviation="4 4" result="glow"/> 
    <feComponentTransfer> 
     <feFuncA type="linear" slope="8"/> 
    </feComponentTransfer> 
    </filter> 
</defs> 
    <use xlink:href="#lines" class="line" /> 
    <use xlink:href="#lines" class="glow" filter="url(#glow)" /> 
</svg> 

CSS : 당신이 사용해야하는 기본 패턴은 다음과 같습니다

body { 
    background: black; 
} 

#lines { 
    stroke-dasharray: 3400; 
    stroke-dashoffset: 3400; 
    animation: draw 16s forwards ease; 
} 

.line { 
    stroke: white; 
    stroke-width: 1; 
} 

.glow { 
    stroke: lime; 
    stroke-width: .7; 
    fill: none; 
    opacity: .5; 
} 

@keyframes draw { 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

요점

하나의 애니메이션 경로의

• 한 세트를 주목에 적용 <g> 경로를 둘러싸고
• 스타일과 필터가에 적용됩니다. 단지 2 계산 단계 대신

Answer 2

음, 재 계산 된 필터는 모두 피하는 것이 좋습니다. 그래서 당신이 할 수있는 것은 빛나는 그림을 먼저 그린 다음 그 위에 4pxish 검정색으로 칠한 사본을 그려서 그 위에 그려진 그림을 역 애니메이트함으로써 원본을 드러내는 것입니다.