Анимация от оранжевого до бирюзового не вступает в силу

#css #animation #svg #css-animations

Вопрос:

Я хотел бы анимировать изображение .svg с помощью css, переключаясь между двумя цветами. Я попытался прочитать здесь учебник и css-трюки, но безуспешно. Я считаю, что моя проблема (или одна из них) может заключаться в том, что я не нацелен на правильный элемент в файле .svg. Но я перепробовал множество различных элементов, идентификаторов, тегов, пробовал использовать разные изображения и даже пытался создать свое собственное изображение. Я поделюсь соответствующим кодом ниже, используя свой первый файл .svg.:

  @keyframes color-change {
            from {
                fill: #f4f00;
            }
            to {
                fill: #a4f4f4;
            }
        }
        #Layer_1, #adobe_illustrator_pgf {
            animation: color-change 4s infinite alternate linear;}

 <svg version="1.1" 
            id="Layer_1" 
            xmlns:x="amp;ns_extend;" 
            xmlns:i="amp;ns_ai;" 
            xmlns:graph="amp;ns_graphs;"
            xmlns="http://www.w3.org/2000/svg" 
            xmlns:xlink="http://www.w3.org/1999/xlink" 
            x="0px" y="0px" 
            viewBox="0 0 750 750"
            style="enable-background:new 0 0 750 750;" 
            xml:space="preserve">
        <switch>
            <foreignObject 
                requiredExtensions="amp;ns_ai;" 
                x="0" 
                y="0" 
                width="1" 
                height="1">
                <i:pgfRef  
                    xlink:href="#adobe_illustrator_pgf">
                </i:pgfRef>
            </foreignObject>

Спасибо!

Обновление: Я создал svg, который хотел, и определенно смог выбрать правильный идентификатор-я смог изменить цвет на оранжевый. Но анимация от оранжевого до бирюзового все еще не вступает в силу.

svg:

   @keyframes color-change {
        from {
            fill: var(--secondary-color);
        }
        to {
            fill: var(--primary-color-lighter);
        }
    }
    #about__main--img__fleur {
        animation: color-change 4s infinite alternate linear;
    }

 <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 750 750" >  
<path style="fill:#ff4f00" d="m 158.31488,-2.2022728 c 91.01571,130.5628628  43.85069,121.0522128 12.21,230.0500028 h 8.42 c  82.76816,-249.50584 171.87632,-54.87233 123.86,-12.24  -51.62689,-90.80719 -96.81,12.24 -96.81,12.24 14.30301,2.24628  34.92456,17.33855 -5.51,23.74 -5.67801,35.22547  14.97807,58.61711 40.68,19.78 21.9137,62.34493  -56.60711,108.84523 -64.69,-19.78 h -9.64 c -5.46371,42.41119  45.01408,82.24554 -8.45,115.11 -45.63648,-28.05726  -15.31394,-61.97543 -8.59,-115.11 h -10.45 c  -11.44247,151.90592 -92.587302,60.58808 -64.690002,19.78  32.374092,54.98005 40.680002,-19.78 40.680002,-19.78  -34.128832,-6.82614 -22.687672,-19.12856 -5.51,-23.74  -43.888082,-101.86884 -96.816002,-12.24 -96.816002,-12.24  -48.014316,-52.93652 50.97435,-223.7694488 123.866002,12.24 h  9.23 c -11.49629,-82.82875 -92.252982,-101.39727  12.21,-230.0500028" id="about__main--img__fleur" sodipodi:nodetypes="ccccccccccccccccccc" />
</svg>

1. Да, извините, только что исправил. Я попытался поэкспериментировать с другими свойствами, чтобы посмотреть, смогу ли я заставить их работать. Однако заполнение-это то, что я хотел бы изменить.

2. Так что же такое pgfRef? На данный момент, похоже, нет ничего, что было бы нарисовано с заливкой, которая изменила бы цвет, т. Е. вы не нацеливаетесь ни на что, что реагирует на цвет заливки.

3. Я выбрал идентификаторы из файла .svg. Итак, если ни один из них не будет реагировать на цвет заливки, есть ли в файле что-то, чему, возможно, я мог бы присвоить идентификатор? Или мне следует полностью изменить свой подход или найти другое изображение с более простой заливкой?

4. Формы или текст Mot будут реагировать на цвет заливки. Формы будут прямыми, кругом, эллипсом, контуром, многоугольником, полилинией (вместе с линией, но линии не заполнены).

5. Понял, я посмотрю, смогу ли я найти или создать изображение, состоящее из фигур, и отчитаюсь. Спасибо!

Ответ №1:

Я удалил из svg style =" fill: # ff4f00 " , так как этот стиль имеет больший вес, чем стили одного и того же элемента в CSS

Присвоен идентификатор пути — id =" Layer_1 "

Остальное сделано более или менее правильно. Довольно хорошо для твоей первой попытки.

Анимация изменения цвета происходит при наведении курсора мыши на фигуру

 #Layer_1 {
     fill:#ff4f00;
    }
    #Layer_1:hover {
    animation: color-change 2s infinite alternate linear;
    }
    @keyframes color-change {
        from {
            fill: #ff4f00;
        }
        to {
            fill: #a4f4f4;
        }
    }

 <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 750 750" >  
         <path id="Layer_1"  d="m 158.31488,-2.2022728 c 91.01571,130.5628628  43.85069,121.0522128 12.21,230.0500028 h 8.42 c  82.76816,-249.50584 171.87632,-54.87233 123.86,-12.24  -51.62689,-90.80719 -96.81,12.24 -96.81,12.24 14.30301,2.24628  34.92456,17.33855 -5.51,23.74 -5.67801,35.22547  14.97807,58.61711 40.68,19.78 21.9137,62.34493  -56.60711,108.84523 -64.69,-19.78 h -9.64 c -5.46371,42.41119  45.01408,82.24554 -8.45,115.11 -45.63648,-28.05726  -15.31394,-61.97543 -8.59,-115.11 h -10.45 c  -11.44247,151.90592 -92.587302,60.58808 -64.690002,19.78  32.374092,54.98005 40.680002,-19.78 40.680002,-19.78  -34.128832,-6.82614 -22.687672,-19.12856 -5.51,-23.74  -43.888082,-101.86884 -96.816002,-12.24 -96.816002,-12.24  -48.014316,-52.93652 50.97435,-223.7694488 123.866002,12.24 h  9.23 c -11.49629,-82.82875 -92.252982,-101.39727  12.21,-230.0500028" />
</svg>

Обновить

Я оптимизировал ваш SVG-код с помощью утилиты SVGOMG. Размер файла уменьшился в несколько раз. Это делается для того, чтобы SVG занимал меньше места на HTML-странице.
Приложение отзывчиво. Вы можете изменить его начальные размеры, используя относительные единицы vw vh в родительском контейнере

 .container {
    width:50vw;
    height:50vh;
    }
    #Layer_1 {
     fill:#ff4f00;
    }
    #Layer_1:hover {
    animation: color-change 2s infinite alternate linear;
    }
    @keyframes color-change {
        from {
            fill: #ff4f00;
        }
        to {
            fill: #a4f4f4;
        }
    }

 <div class="container">     
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 750 750" >  
         <path id="Layer_1"  d="M158-2c91 130 44 121 13 230h8c83-250 172-55 124-12-52-91-97 12-97 12 14 2 35 17-6 24-5 35 15 58 41 19 22 63-56 109-65-19h-9c-6 42 45 82-9 115-45-28-15-62-8-115h-11c-11 151-92 60-64 19 32 55 40-19 40-19-34-7-22-20-5-24-44-102-97-12-97-12-48-53 51-224 124 12h9c-11-83-92-102 12-230" />
</svg>       
</div>

1. Предложения Роберта и Александра помогли, но не полностью решили проблему. В конечном счете, размещение всего svg-кода в html, а не связанного в виде img, стало последним шагом к успешной анимации.

2. @Scaramouche Я еще раз внимательно прочитал ваш вопрос и нигде не нашел, что вы пытались добавить svg-код в html с помощью тегов <img>. Ваш вопрос выглядит точно так же, как добавление встроенного svg, Работает ли приложение? Поэтому было бы хорошо принять мой ответ в качестве решения.

3. Дев ка нишу иди, а вопрос такси будь. Но ответ действительно потрясающий!