Wie Sie das erreichen, blinkender Effekt in svg?

Stimme ich zu. Das "animieren" SVG-element ist das, was Sie wollen. Für jeden, der will, javascript zu verwenden, um diese Art von animation auf und verwalten es, hier ist eine Methode, die ich benutze:

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);
    }
}

}

Läuft nicht eigenständig. Wenn Sie ausführen möchten, können Sie auf den gesamten Satz von code mit arbeiten an Beispielen:

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