etiqueta de botón nativa dentro de svg canvas

Question

Necesito colocar una etiqueta de botón dentro de un lienzo SVG, ¿hay alguna manera? (Estoy usando raphael JS)

Sé que puedo 'dibujar' un botón dentro del lienzo svg y codificar el evento onclick, pero quiero preservar la apariencia original de los botones del navegador. Gracias.

Answer 1

Es posible utilizar botones HTML dentro de SVG, usando el elemento SVG foreignObject: http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement

Hay un ejemplo que se incluye en la especificación de cómo usarlo.

Lamentablemente, no estoy seguro de cómo se puede utilizar foreignObject de raphaeljs. Creo que foreignObject no está expuesto como parte de la API de RapahelJS. La razón de esto es que puede no haber una forma clara de lograr el mismo objetivo con VML en IE. Sin embargo, raphaeljs hace que sea bastante fácil acceder a los nodos SVG DOM nativos subyacentes de sus objetos, por lo que si la compatibilidad de IE no es esencial para su aplicación, entonces debería ser bastante fácil de utilizar foreignObject utilizando la API habitual de SVG DOM. Por ejemplo, podría hacer lo siguiente:

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...