родной тег кнопки внутри холста svg - PullRequest
Новая
       4

родной тег кнопки внутри холста svg

7 голосов
/ 07 ноября 2010

Мне нужно разместить тег кнопки внутри холста SVG, есть ли способ? (Я использую Raphael JS)

Я знаю, что могу «нарисовать» кнопку внутри холста svg и кодировать событие onclick, но я хочу сохранить естественный вид кнопок браузера. Спасибо.

1 Ответ

10 голосов
/ 08 ноября 2010

В SVG можно использовать кнопки HTML, используя элемент SVO foreignObject: http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement

В спецификации, посвященной его использованию, есть пример.

К сожалению,Я не уверен, как вы могли бы лучше всего использовать ForeignObject от Raphaeljs.Я считаю, что foreignObject не предоставляется как часть API RapahelJS.Причина этого заключается в том, что не может быть чистого способа достижения той же цели с VML на IE.Тем не менее, через Raphaeljs довольно легко получить доступ к базовым нативным узлам SVG DOM своих объектов, поэтому, если совместимость с IE не является существенной для вашего приложения, тогда довольно просто использовать foreignObject с использованием обычного API SVG DOM.Например, вы можете сделать следующее: 

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