Question

I need to place a button tag inside a SVG canvas, is there a way? (I’m using raphael JS)

I know I can ‘draw’ a button inside the svg canvas and code the onclick event but I want to preserve the native look and feel of the browser buttons. Thank you.

Answer 1

It is possible to use HTML buttons within SVG, using the SVG foreignObject element: http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement

There is an example included in the spec of how to use it.

Unfortunately, I’m not sure how you could best use foreignObject from raphaeljs. I believe that foreignObject is not exposed as part of the RapahelJS API. The reason for this is that there may not be a clean way of achieve the same goal with VML on IE. However, raphaeljs does make it fairly easy to access the underlying native SVG DOM nodes of its objects, so if IE compatibility is not essential for your application, then it should be fairly easy to use foreignObject using the regular SVG DOM API. For example, you could do the following:

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