Используйте CSS для анимации заливки SVG по пути

Question

Я видел много вопросов и ответов о том, как сделать полную анимацию объекта цвета, например here. Однако возможно ли одушевить острый движущийся цветной блок через заливку (внутренность пути)? Как можно было бы оживить SVG?

Answer 1

Есть несколько библиотек Javascript, которые вы можете изучить: svgjs или Snap.svg .... Если вы указываете в правильном направлении.

Просто быстрый фрагмент кода, в котором будет работать snap. Я просто дам вам сенарио, где вы хотите изменить заливку svg на hover.

<svg id="targetSvg" ...> 
    <!-- path forming the upper shell --> 
    <g> 
    <path id="1" fill="#000" d="..."/> 
    <path id="2" fill="#fff" d="..."/> 
    <path id="3" fill="#000" d="..."/> 
    </g> 
</svg> 

Javascript

//select the svg you want to have the effect on 
s = Snap("#targetSvg"); 

s.select("g").hover(isHover, idHoverOut); 

function isHover() { 
    this.selectAll('path').forEach(function(el){ 
     el.attr({ class: 'fadeIn' }) }); 
}; 

function isHoverOut() { 
    this.selectAll('path').forEach(function(el){ 
     el.attr({ class: 'fadeOut' }) }); 
}; 

стилей Css

.fadein { 
    transition: fill 1s linear; 
    fill:blue; 
} 

.fadeout { 
    transition: fill 1s linear; 
}