2017-02-23 3 views
0

У меня есть файл svg с количеством путей. Пусть это будет структура файла:анимировать несколько путей в svg без использования css

<g> 
<path>......</path> 
<path>......</path> 
<path>......</path> 
<path>......</path> 
<path>......</path> 
<path>......</path> 
</g> 

Я хочу, чтобы оживить все эти пути вместе без использования CSS, примерно так:

<animate 
    attributeName="fill-opacity" 
    from="0" 
    to="1" 
    dur="2s" 
    begin="3s" 
    fill="freeze" /> 

Я не хочу, чтобы стремиться каждый путь конкретно.

ответ

2

Все, что вам нужно сделать, это поместить ваш <animate> в группу, чтобы вы указали значение fill-opacity группы. Пути наследуют эту непрозрачность.

<svg> 
 
    <g fill-opacity="0"> 
 
    <animate 
 
     attributeName="fill-opacity" 
 
     from="0" 
 
     to="1" 
 
     dur="2s" 
 
     begin="0s" 
 
     fill="freeze" /> 
 

 
    <path d="M0,0 L100,0 L50,150 Z" fill="red"/> 
 
    <path d="M150,0 L200,150 L100,150 Z" fill="limegreen"/> 
 
    <path d="M200,0 L300,0 L250,150 Z" fill="purple"/> 
 
    </g> 
 
</svg>

+0

Вот именно то, что я искал, спасибо –

Смежные вопросы