从橙色到蓝绿色的动画没有生效答案

【问题标题】：Animation from orange to teal is not taking effect从橙色到蓝绿色的动画没有生效
【发布时间】：2021-11-23 18:51:55
【问题描述】：

我想用 css 为 .svg 图像制作动画，在两种颜色之间切换。我在这里尝试了一个教程和css-tricks，但没有成功。我相信我的问题（或其中之一）可能是我没有针对 .svg 中的正确元素。但我尝试了许多不同的元素、id、标签，尝试使用不同的图像，甚至尝试制作自己的图像。我将使用我的首选 .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="&ns_extend;" 
            xmlns:i="&ns_ai;" 
            xmlns:graph="&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="&ns_ai;" 
                x="0" 
                y="0" 
                width="1" 
                height="1">
                <i:pgfRef  
                    xlink:href="#adobe_illustrator_pgf">
                </i:pgfRef>
            </foreignObject>

谢谢！

更新：我创建了我想要的 svg，并且绝对能够定位正确的 id——我能够将颜色更改为橙色。但是从橙色到青色的动画仍然没有生效。

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>

【问题讨论】：

是的，抱歉，刚刚更正。我曾尝试尝试其他属性，看看是否可以让它们工作。填充是我想要更改的内容。
那么 pgfRef 是什么？目前，似乎没有任何使用会改变颜色的填充绘制的内容，即您没有针对任何响应填充颜色的内容。
我定位了 .svg 文件中的 id。因此，如果这些都不会响应填充颜色，那么文件中是否有一些东西可以，也许我可以为其分配一个 id？或者我应该完全改变我的方法或找到一个更直接填充的不同图像？
Mot 形状或文本将响应填充颜色。形状可以是矩形、圆形、椭圆、路径、多边形、折线（与线一起，但不填充线）。
知道了，我会看看我是否能找到或创建一个由形状组成的图像并报告回来。谢谢！

标签： css animation svg css-animations

【解决方案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>

更新

我已使用 SVGOMG 实用程序优化了您的 SVG 代码。文件大小减少了好几倍。这是为了让 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>

【讨论】：

Robert 和 Alexandr 的建议都有帮助，但并没有完全解决问题。最终，将整个 svg 代码放在 html 中，而不是链接为 img，是成功动画的最后一步。
@Scaramouche 我再次仔细阅读了您的问题，并没有找到您尝试使用标签将 svg 代码添加到 html 的任何地方您的问题看起来与添加 svg inline 完全一样吗？因此，最好接受我的回答作为解决方案。
Dev ka 小众去，vopros taksi 是。但答案真的很棒！