Javascript zum Ändern der Farbe einer Svg-Form

Question

Hallo, gibt es eine Möglichkeit der Verwendung von Javascript zum Beispiel mit den Tasten, um die Farbe einer Svg-Form zu ändern? Wenn ja, könnte jemand bitte mich in die richtige Richtung führen Dank

Answer 1

Ich habe mit einem simplen jsfiddle für Sie kommen. Grundsätzlich ändern Sie den Stil der jeweiligen SVG-Elemente wie bei normalen DOM-Elementen.

Answer 2

Wenn Sie eine Anzahl dieser Formen haben, dann schauen Sie sich die d3 library, die explizit entworfen ist, damit Sie Daten an SVG-Attribute binden können. Eine gute Erklärung für die Funktionsweise ist das Tutorial Three little circles.

Wenn Sie wollen einfach nur ein Attribut eines svg Form ändern auf eine Schaltfläche klicken, dann müssen Sie ein Onclick-Handler für die Schaltfläche:

function handleClick() { 
    // code to modify svg here, e.g.: 
    document.getElementById('svgShapeId').setAttribute('cx',150); 
} 

document.getElementById('buttonId').onclick = handleClick; 

Answer 3

Hier ist ein Beispiel JS die Verwendung von Animationselementen zu schaffen, Farben zu markieren, basierend auf der Maus über/out:
http://phrogz.net/SVG/change-color-on-hover.svg

Hier ein Beispiel für ein SVG ist, die viele Farben und Haus einiger dummen Mouseover-Tasten ändern:
http://phrogz.net/SVG/rgbhsv.svg

Hier ist ein Beispiel, das SVG in XHTML zeigt, mit beiden nativen HTML-Widgets (ein HTML5-Slider) sowie ziehbar SVG-Elemente (der Pfad Griffe):
http://phrogz.net/SVG/area_of_path.xhtml

Allgemein gilt:

1. Elemente finden
2. Attach Event-Handler
3. In den Event-Handler, passen Eigenschaften (entweder über XML Einstellung Attribute oder über die SVG DOM)