tag de bouton natif à l'intérieur de la toile svg

Question

Je dois placer une étiquette de bouton à l'intérieur d'une toile SVG, est-il un moyen? (J'utilise raphael JS)

Je sais que je peux 'dessiner' un bouton dans le canvas svg et coder l'événement onclick mais je veux préserver l'aspect natif des boutons du navigateur. Je vous remercie.

Answer 1

Il est possible d'utiliser les boutons HTML dans les SVG, en utilisant l'élément SVG foreignObject: http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement

Il est un exemple inclus dans la spécification de la façon de l'utiliser. Malheureusement, je ne suis pas sûr de la meilleure façon d'utiliser foreignObject depuis raphaeljs. Je crois que foreignObject n'est pas exposé dans le cadre de l'API RapahelJS. La raison en est qu'il n'y a peut-être pas un moyen propre d'atteindre le même objectif avec VML sur IE. Cependant, raphaeljs facilite l'accès aux nœuds DOM SVG sous-jacents de ses objets, donc si la compatibilité IE n'est pas essentielle pour votre application, alors il devrait être assez facile d'utiliser foreignObject en utilisant l'API DOM SVG habituelle. Par exemple, vous pouvez faire ce qui suit:

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