Как реализовать анимационный градиент в моем примере SVG - PullRequest
0 голосов
/ 15 сентября 2018

Привет! Я смотрел на исходный код, который реализует цветовой градиент на быстром примере SVG, который я сделал в Adobe Illustrator.Почему-то я не могу понять, как заставить его работать так, чтобы раздел «st0» подвергался воздействию градиента с именем «logo-градиент».Любая помощь?

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     style="enable-background:new 0 0 47.4 47.7;" xml:space="preserve" width="50" height="50">

   <defs>
     <linearGradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%" >
       <stop offset="0%" stop-color="#7A5FFF">
         <animate attributeName="stop-color" values="#7A5FFF; #01FF89; #7A5FFF" dur="4s" repeatCount="indefinite"></animate>
       </stop>

       <stop offset="100%" stop-color="#01FF89">
         <animate attributeName="stop-color" values="#01FF89; #7A5FFF; #01FF89" dur="4s" repeatCount="indefinite"></animate>
       </stop>
     </linearGradient>
   </defs>

<style type="text/css">
    .st0{fill:"url('#logo-gradient')"}
</style>

<g id="Layer_2">
    <rect x="-11.8" y="-9" width="66" height="63"/>
</g>
<g id="Layer_1">
    <g>
        <g>
            <path d="M12.1,30.4v1c0,8.1,3.9,11.9,8.7,11.9c3.9,0,7.3-1.8,9.4-6.6h0.1c-1.4,7.4-5.8,11-12.5,11c-7,0-13.6-4.6-13.6-15.1
                c0-11.4,7.1-15.6,13.9-15.6c6.1,0,12.2,3.2,12.2,11.8c0,0.5-0.1,1-0.1,1.5H12.1z M12.1,29.3h10.8c0.1-0.5,0.1-0.9,0.1-1.2
                c0-6.9-1.6-10.1-5-10.1C14.4,18,12.4,21.9,12.1,29.3z"/>
            <path d="M44.1,43.2c0,0.7,0.1,0.8,0.7,1.3l3.6,2.6v0.1h-16v-0.1l3.6-2.6c0.5-0.4,0.6-0.7,0.6-1.3V8.8c0-0.8-0.1-1-0.6-1.4
                l-3.6-2.6V4.7l11.8-1.4V43.2z"/>
        </g>
        <g>
            <path class="st0" d="M12.1,30.4v1c0,8.1,3.9,11.9,8.7,11.9c3.9,0,7.3-1.8,9.4-6.6h0.1c-1.4,7.4-5.8,11-12.5,11
                c-7,0-13.6-4.6-13.6-15.1c0-11.4,7.1-15.6,13.9-15.6c6.1,0,12.2,3.2,12.2,11.8c0,0.5-0.1,1-0.1,1.5H12.1z M12.1,29.3h10.8
                c0.1-0.5,0.1-0.9,0.1-1.2c0-6.9-1.6-10.1-5-10.1C14.4,18,12.4,21.9,12.1,29.3z"/>
            <path class="st0" d="M44.1,43.2c0,0.7,0.1,0.8,0.7,1.3l3.6,2.6v0.1h-16v-0.1l3.6-2.6c0.5-0.4,0.6-0.7,0.6-1.3V8.8
                c0-0.8-0.1-1-0.6-1.4l-3.6-2.6V4.7l11.8-1.4V43.2z"/>
        </g>
    </g>
</g>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...