2

Добрый день уважаемые. Подскажите, пожалуйста кто знает, как реализуется анимация повышения коэффициента прозрачности для SVG элементов, фон у которых задан градиентом. Приведу простой пример.

.st1 {
  fill: url(#SVGID_1_);
}
<svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 355" style="enable-background:new 0 0 400 355;" xml:space="preserve">
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.045" y1="176.35" x2="200.045" y2="234.02">
    <stop offset="0" style="stop-color:#000000" />
    <stop offset="0" style="stop-color:#000000" />
    <stop offset="0" style="stop-color:#000000" />
    <stop offset="4.293300e-002" style="stop-color:#000000;stop-opacity:0.8" />
    <stop offset="5.000000e-002" style="stop-color:#000000;stop-opacity:0.5" />
    <stop offset="7.944028e-002" style="stop-color:#000000;stop-opacity:0.1" />
    <stop offset="1" style="stop-color:#000000;stop-opacity:0" />
  </linearGradient>
  <rect x="171.2" y="48" class="st1" width="57.7" height="256.7" />
</svg>

Желательно без применения JS, средствами CSS. Как постепенно (скажем за 1 сек) Вывести для вей фигуры opacite: 1 ?

2 ответа 2

2

Интересная это тема - анимация градиентов. Можно любой атрибут градиента анимировать. Если в примере выше использовалось - <animate attributeName="stop-opacity" values="0; 1", то в примере ниже задействован аттрибут - <animate attributeName="stop-color"

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<linearGradient id="Grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop stop-color="rgb(0,0,12)" offset="0%">
<animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)" repeatCount="indefinite" />
<animate attributeName="offset" dur="24s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0" repeatCount="indefinite" />
</stop>
<stop stop-color="rgb(0,0,12)" offset="100%" >
<animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)" repeatCount="indefinite" />
</stop>
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#Grad1)" />
</svg>

Изменяемые значения градиента указываются через точку с запятой в атрибуте values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);"
Работоспособность данного вида анимации градиента проверена в Chrome, Firefox, Opera

1

Подправил после уточнений

Надо немного изменить свойство <stop> И добавить ему анимацию

 <stop offset="1" style="stop-color:#000000;stop-opacity:0">
   <animate attributeName="stop-opacity" values="0; 1" dur="3s" repeatCount="indefinite"></animate>
 </stop>

.st1 {
  fill: url(#SVGID_1_);
}
<svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 355" style="enable-background:new 0 0 400 355;" xml:space="preserve">
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.045" y1="176.35" x2="200.045" y2="234.02">
    <stop offset="4.293300e-002" style="stop-color:#000000;stop-opacity:0.8" />
    <stop offset="5.000000e-002" style="stop-color:#000000;stop-opacity:0.5" />
    <stop offset="7.944028e-002" style="stop-color:#000000;stop-opacity:0.1" />
    <stop offset="1" style="stop-color:#000000;stop-opacity:0">
    <animate attributeName="stop-opacity" values="0; 1" dur="3s" repeatCount="indefinite"></animate>
    </stop>
  </linearGradient>
  
  <rect x="171.2" y="48" class="st1" width="57.7" height="256.7" />
</svg>

3
  • С точностью до наоборот. У меня есть прямоугольник примерно половина которого постепенно скрыта (... <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> ) как сделать что б она постепенно проявлялась? 21 янв 2017 в 10:55
  • Исправил, анимацию, если необходимо, надо прописать к каждому блоку <stop> отдельно 21 янв 2017 в 12:03
  • Спасибо, помогло jsfiddle.net/17g1rj4k/1 21 янв 2017 в 14:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.