svg画布内的本机按钮标签答案

【问题标题】：native button tag inside svg canvassvg画布内的本机按钮标签
【发布时间】：2010-11-08 07:03:50
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

可以在 SVG 中使用 HTML 按钮，使用 SVG foreignObject 元素：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...

【讨论】：