Native Button-Tag in Svg Leinwand

Question

Ich muss eine Schaltfläche Tag in einer SVG-Leinwand platzieren, gibt es eine Möglichkeit? (Ich benutze Raphael JS)

Ich weiß, ich kann eine Schaltfläche in der Svg Canvas "zeichnen" und Code das Onclick-Ereignis, aber ich möchte das native Aussehen und Gefühl der Browser-Schaltflächen erhalten. Vielen Dank.

Answer 1

Es ist möglich, HTML-Schaltflächen innerhalb SVG zu verwenden, das SVG foreign Element mit: http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement

Es gibt ein Beispiel in der Spezifikation von eingeschlossen, wie es zu benutzen.

Leider bin ich nicht sicher, wie Sie am besten fremorObject von raphaeljs verwenden können. Ich glaube, dass fremnObject als Teil der RapahelJS-API nicht verfügbar ist. Der Grund dafür ist, dass es keine saubere Möglichkeit gibt, dasselbe Ziel mit VML auf IE zu erreichen. Raphaeljs macht es jedoch relativ einfach, auf die zugrunde liegenden nativen SVG-DOM-Knoten seiner Objekte zuzugreifen. Wenn also die IE-Kompatibilität für Ihre Anwendung nicht erforderlich ist, sollte die Verwendung von regulärem SVG-DOM-API recht einfach sein. Zum Beispiel könnten Sie Folgendes tun:

var paper = Raphael("canvas", 640, 480); 
var svgRoot = paper.canvas; //everywhere except IE, this is an SVGSVGElement 
var fo = document.createElementNS(paper.svgns,"foreignObject") 
svgRoot.appendChild(fo); 
//then add your HTML DOM nodes to fo here using regular HTML DOM...