Animation 如何在svg中实现闪烁效果？

这是我的汽车背光元素，是分组在一起。我想将分组元素设置为闪烁 红色效果请帮帮我

---

以下是闪烁动画的示例：

元素就是你所需要的。
我同意。“动画”SVG元素就是您想要的。对于任何想要使用javascript设置和管理此类动画的人，我使用以下方法：

const BLINK_DURATION_ERROR = "0.5s";
const BLINK_DURATION_WARNING = "0.75s";
var svgNS = "http://www.w3.org/2000/svg"; 
LCARSComponent.prototype.setBlinking = function(enabled, color, duration) {

/** If the duration argument is null, set a default blink duration. */
if(duration == null) {
    duration = BLINK_DURATION_WARNING;
}

/** If blinking is enabled... */
if(enabled) {
    /** Create the DOM object for shape animation, and set its attributes. */
    this.animateElement = document.createElementNS(svgNS, "animate");
    this.animateElement.setAttribute("attributeType", "XML");
    this.animateElement.setAttribute("attributeName", "fill");
    this.animateElement.setAttribute("values", this.getBlinkColors(color));
    this.animateElement.setAttribute("dur", duration);
    this.animateElement.setAttribute("repeatCount", "indefinite");
    /** Append the animation element to the shape element. */
    this.shapeElement.appendChild(this.animateElement);

    /** Create the DOM object for the shape's text animation, and set its attributes. */
    this.textAnimateElement = document.createElementNS(svgNS, "animate");
    this.textAnimateElement.setAttribute("attributeType", "XML");
    this.textAnimateElement.setAttribute("attributeName", "fill");
    this.textAnimateElement.setAttribute("values", "#000;" + LCARS.getTextColor(color));
    this.textAnimateElement.setAttribute("dur", duration);
    this.textAnimateElement.setAttribute("repeatCount", "indefinite");
    /** Append the animation element to the text element. */
    this.textElement.appendChild(this.textAnimateElement);


}
/** Else if blinking is not enabled... */
else {
    /** If the shape animate element exists, remove it. */
    if(this.animateElement != null) {
        this.shapeElement.removeChild(this.animateElement);
    }
    /** If the text animate element exists, remove it. */
    if(this.textAnimateElement != null) {
        this.textElement.removeChild(this.textAnimateElement);
    }
}

}

不能独立运行。如果要运行它，您可以通过以下位置的工作示例访问整个代码集：

您也可以使用CSS：



@关键帧闪烁{
100%,
0% {
填充：#500；
}
60% {
填充：#f00；
}
}
g矩形{
动画：闪烁0.8秒无限；
}
使用SVG使某些东西“闪烁”需要它在一段时间内是透明的，并且在另一段时间内有一定的填充。使用SVG SMIL动画，您可以通过使用
calcMode=“discrete”
属性来实现这一点，该属性将使动画将
fill
属性更改为filled或transparent，而不是介于两者之间的任何内容（tweening）


这会添加额外的xmlns属性，从而中断动画。有没有办法解决这个问题？是否可以通过css控制闪烁效果（填充颜色、持续时间等）？我有一个svg图标，当不同的类应用于它时，它需要显示不同的内容，所以我正在尝试开发一个基于css的解决方案。当然，你可以在css中设置所有内容的动画，并使用你想要的类，比如在这个示例中：在没有颜色转换的情况下使这个闪烁，您可以在动画声明的末尾添加
步骤结束
：
动画：闪烁0.8s无限步骤结束
const BLINK_DURATION_ERROR = "0.5s";
const BLINK_DURATION_WARNING = "0.75s";
var svgNS = "http://www.w3.org/2000/svg"; 
LCARSComponent.prototype.setBlinking = function(enabled, color, duration) {

/** If the duration argument is null, set a default blink duration. */
if(duration == null) {
    duration = BLINK_DURATION_WARNING;
}

/** If blinking is enabled... */
if(enabled) {
    /** Create the DOM object for shape animation, and set its attributes. */
    this.animateElement = document.createElementNS(svgNS, "animate");
    this.animateElement.setAttribute("attributeType", "XML");
    this.animateElement.setAttribute("attributeName", "fill");
    this.animateElement.setAttribute("values", this.getBlinkColors(color));
    this.animateElement.setAttribute("dur", duration);
    this.animateElement.setAttribute("repeatCount", "indefinite");
    /** Append the animation element to the shape element. */
    this.shapeElement.appendChild(this.animateElement);

    /** Create the DOM object for the shape's text animation, and set its attributes. */
    this.textAnimateElement = document.createElementNS(svgNS, "animate");
    this.textAnimateElement.setAttribute("attributeType", "XML");
    this.textAnimateElement.setAttribute("attributeName", "fill");
    this.textAnimateElement.setAttribute("values", "#000;" + LCARS.getTextColor(color));
    this.textAnimateElement.setAttribute("dur", duration);
    this.textAnimateElement.setAttribute("repeatCount", "indefinite");
    /** Append the animation element to the text element. */
    this.textElement.appendChild(this.textAnimateElement);


}
/** Else if blinking is not enabled... */
else {
    /** If the shape animate element exists, remove it. */
    if(this.animateElement != null) {
        this.shapeElement.removeChild(this.animateElement);
    }
    /** If the text animate element exists, remove it. */
    if(this.textAnimateElement != null) {
        this.textElement.removeChild(this.textAnimateElement);
    }
}