svg画布里面的原生按钮标签

Question

我需要在SVG画布中放置一个按钮标签，有办法吗？ （我正在使用raphael JS）

我知道我可以在svg画布中“绘制”一个按钮并对onclick事件进行编码，但我希望保留浏览器按钮的原生外观。谢谢。

Answer 1

可以使用SVG foreignObject元素在SVG中使用HTML按钮：http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement

如何使用它的规范中包含一个例子。

不幸的是，我不确定如何最好地使用来自raphaeljs的foreignObject。我相信foreignObject不会作为RapahelJS API的一部分公开。原因是在IE上可能没有一种干净的方法来实现与VML相同的目标。但是，raphaeljs确实可以很容易地访问其对象的底层本机SVG DOM节点，因此如果IE兼容性对于您的应用程序不是必不可少的，那么使用常规SVG DOM API使用foreignObject应该相当容易。例如，您可以执行以下操作：

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