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

Question

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

​

<g i:extraneous="self">
		<rect id="_x3C_Slice_x3E_" x="25" y="376" fill="none" width="370" height="179"/>
		<g>
		
		
		<path fill="#FFFFFF" d="M934.067,311.165c12.26,1.315,28.337,3.037,44.412,4.777c0.821,0.089,1.632,0.312,2.437,0.517
				c14.782,3.774,16.479,5.841,16.588,20.831c0.045,6.153-0.094,12.312-0.33,18.462c-0.104,2.691-0.441,5.433-4.343,5.3
				c-12.757-0.435-24.096,3.744-34.514,10.815c-2.962,2.01-5.089,2.588-8.159-0.861c-6.928-7.784-14.555-14.961-22.084-22.191
				c-8.966-8.611-20.62-10.899-32.251-12.689c-9.62-1.481-19.398-1.921-29.04-3.289c-2.269-0.322-5.744-2.283-6.011-3.922
				c-0.309-1.899,1.863-4.823,3.736-6.346c6.921-5.632,15.353-7.756,23.996-8.483C902.341,312.92,916.222,312.277,934.067,311.165z"/>
          
<path fill="#FFFFFF"d="M995.938,362.712c0.686,17.885,10.416,32.693,16.896,48.64c1.773,4.363,3.789,8.627,5.984,13.594
				c-11.115-0.752-20.116-4.749-27.361-11.47c-12.607-11.695-24.51-24.149-37.111-36.686
				C967.094,366.515,980.419,361.753,995.938,362.712z"/>
          
<path fill="#FFFFFF" d="M1015.687,485.421c-0.813,4.715-1.888,9.404-2.351,14.153c-0.34,3.49-2.639,4.195-4.724,3.059
				c-2.714-1.479-5.705-3.691-6.968-6.352c-3.524-7.421-6.233-15.231-9.236-22.897c-2.169-5.538-1.751-6.154,4.18-6.392
				C1008.343,466.518,1015.764,473.82,1015.687,485.421z"/>
          <path fill="#FFFFFF" d="M1005.334,503.453c2.788,0.592,5.757,0.801,8.263,1.988c0.855,0.405,0.547,3.267,0.771,5.006
				c-0.399,0.32-0.798,0.639-1.197,0.959c-2.851-2.272-5.702-4.544-8.554-6.816C1004.857,504.21,1005.096,503.831,1005.334,503.453z
				"/>

​

Answer 1

我同意。“动画”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);
    }
}

}

不能独立运行。如果您想运行它，您可以访问整个代码集，并在以下位置使用工作示例：

https://github.com/agent-P/LCARS-Javascript-Framework

Answer 2

下面是一个闪烁动画的例子：http://jsfiddle.net/pLh05ypL/1/

​

<svg width="320" height="320" viewBox="0 0 320 320">
        <path
        fill="#FFFFFF" stroke="#000"
        d="M160,100 Q200,100,200,300 Q100,300,100,200 Z">
        <animate
            attributeType="XML"
            attributeName="fill"
            values="#800;#f00;#800;#800"
            dur="0.8s"
            repeatCount="indefinite"/>
        </path>
 </svg>

​

animate元素是您所需要的。

Answer 3

您还可以使用CSS：http://jsfiddle.net/aruqen/yrqjo6k8/10/

<svg width="400" height="400" viewBox="0 0 400 400">
  <g>
    <rect fill="#FFFFFF" stroke="#000" x="50" y="50" width="150" height="150" />
    <rect fill="#FFFFFF" stroke="#000" x="200" y="200" width="150" height="150" />
  </g>
</svg>

@keyframes blink {
  100%,
  0% {
    fill: #500;
  }
  60% {
    fill: #f00;
  }
}

g rect {
  animation: blink 0.8s infinite;
}