javascript – svg canvas中的本机按钮标记

我需要在SVG画布中放置一个按钮标签,有没有办法？ (我正在使用raphael JS)

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

解决方法:

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

有关如何使用它的规范中包含一个示例.

不幸的是,我不确定如何最好地使用来自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...

标签：javascript,svg,raphael
来源： https://codeday.me/bug/20191008/1870351.html