svg画布内的本机按钮标签 [英] native button tag inside svg canvas

问题描述

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

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

我知道我可以在svg画布内绘制"按钮并编码onclick事件，但是我想保留浏览器按钮的本机外观.谢谢你.

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.

推荐答案

可以通过SVG foreignObject元素在SVG中使用HTML按钮:

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.

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

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

这篇关于svg画布内的本机按钮标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！