javascript - native button tag inside svg canvas - Stack Overflow

admin管理员组

文章数量:1346189

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.

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.

• javascript
• svg
• raphael

Share Improve this question Follow asked Nov 7, 2010 at 17:15 MauricioMauricio 5,85122 gold badges3030 silver badges3434 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

It is possible to use HTML buttons within SVG, using the SVG foreignObject element: http://www.w3/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 patibility 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...

本文标签： javascriptnative button tag inside svg canvasStack Overflow