Surveiller ce forum | Commencer une nouvelle discussion Commencer une nouvelle discussion
RE: SVG inline [ Répondre ]
Par : Benjamin Leperchey on 2007-01-11 13:40		[forum:52398]
Voir le feature-request pour un exemple.

RE: SVG inline [ Répondre ]
Par : Steve PEGUET on 2007-01-04 16:00		[forum:52390]
Est-ce que quelqu'un peut faire des tests sur MSIE7 et un FF non MAE?

Merci d'avance...

SVG inline [ Répondre ]
Par : Benjamin Leperchey on 2007-01-04 15:53		[forum:52389]
Un composant pour intégrer du SVG au document HTML, en partageant le DOM et les cripts. Avantages par rapport au "embed" pur et dur : pas besoin de framework technique pour le SVG, ceux pour HTML suffisent, pas de chargement en double de scripts, et surtout *interactions entre le HTML et le SVG* (formulaires qui contrôlent le SVG et vice-versa).

Quelques points techniques pour commencer :

* FF gère le SVG en natif, on peut intégrer des élément SVG dans le DOM HTML. Tout ça ne marche évidemment qu'en XHTML. On peut mettre le plugin Adobe, mais on perd le lien entre l'intérieur et l'extérieur du SVG.

* IE ne gère pas le SVG en natif (IE7 un peu paraît-il, mais je ne l'ai pas installé donc je n'en sais rien). Par contre, le plugin Adobe y marche très bien, et grâce à la super politique de sécurité de IE, on voit l'intérieur du SVG depuis l'extérieur et vice-versa (les trous de sécurité ont parfois leurs avantages).

Moralité : il faut faire du XHTML avec Firefox en du HTML+embed avec IE. Pour en terminer rapidement avec les points techniques, une astuce trouvée sur <a href="http://wiki.svg.org/index.php?title=Inline_SVG";>SVG Wiki</a> :

* définir le type mime de .xhtml comme text/html (c'est mal, mais il faut ça pour IE),
* ajouter une règle avec mod_rewrite qui dit que si le browser accepte le XHTML, alors en fait c'est du XHTML (c'est mieux, et il faut ça pour Firefox)

Avec les bons object et import-namespace dans le <head>, on peut faire du SVG inline cross-browser FF/IE. Mais pas encore du SVG inline *dynamique*.

Avec FF, c'est facile : on modifie le DOM et c'est tout. Avec IE, c'est plus dur, car le document n'est pas véritablement le même. Deuxième hack : sous IE, on fait un embed bidon, et on y écrit ce qu'on veut. Attention : il faut faire attention en créant les élément SVG.

Bilan des courses : le petit composant ci-après qui, étant donné un div, crée ce qu'il faut pour faire du SVG (<svg:svg xmlns:svg="..."> sous FF, <embed type="xml+svg"> sous IE) et offre des méthodes pour créer des éléments DOM dans le bon document (le document XHTML pour FF, le SVGDocument du embed pour IE).

Par l'exemple :

composantSVG = new ComposantSVG('CONTENU_WIN',
'Position_graphe',600,400,
'blank.svg');
composantSVG.initDivBind();

'bank.svg' est le chemin d'un document SVG qui contient les feuilles de style nécessaires. Utilisé lors de l'initialisation du embed pour IE. Pour Firefox, il faut mettre les CSS directement dans le XHTML. 600 et 400 sont respectivement la largeur et la hauteur demandées.

composantSVG.clear();
var root = composantSVG.getDocumentRoot();
var rect = composantSVG.createElement('rect');
rect.setAttribute("x",0);
rect.setAttribute("y",0);
rect.setAttribute("width",100);
rect.setAttribute("height",100);
root.appendChild(rect);

efface le contenu du SVG et met un rectangle à la place.

Ca marche sous IE6+ASV et FF2.0. Problème au MAE avec FF 1.5, mais c'est peut-être du au fait que ASV a été installé dessus (il devrait être désactivé, pourtant). Investigation en cours.

Limitation : il faut rendre la main entre initDivBind et l'utilisation du composant, pour que IE le crée. Un alert ou un timeout suffisent.

Piste à explorer : se débarasser du <embed> de IE, et utiliser directement le SVG inline, ce qui devrait résoudre ce problème. Je ne sais pas si ça marche, mais ça serait plus simple de toute façon.

En bref, ce n'est pas 100% opérationnel, mais c'est prometteur je trouve.

Et maintenant, le code :

/////////////////////////////////////////////////////////////////////
function createSVGElement(doc,tag)
{
return doc.createElementNS("http://www.w3.org/2000/svg",tag);
}
function createSVGTextNode(doc,text)
{
return doc.createTextNode(text);
}

// IE + ASV ?
function isASVInstalled() {
try {
var asv = new ActiveXObject("Adobe.SVGCtl");
return true;
}
catch(e) { }
return false;
}



function getDocument(frameId)
{
return (frameId != null) ? window.frames[frameId].document : document;
}
function getElementByIdInFrame(frameId,id)
{
return getDocument(frameId).getElementById(id);
}


function ComposantSVG_initDivBind(frameId,id,width,height)
{
var doc = getDocument(this.frameId);
var element;
if (isASVInstalled())
{
var element = doc.createElement('embed');
element.setAttribute('codebase', 'http://www.adobe.com/svg/viewer/install/');
element.setAttribute('classid', 'clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2');
element.setAttribute('pluginspage', 'http://www.adobe.com/svg/viewer/install/');
element.setAttribute('src', this.blankFile);
element.setAttribute('type', 'image/svg+xml');
}
else
{
var element = createSVGElement(doc,'svg');
}
element.setAttribute('width', this.width+'px');
element.setAttribute('height', this.height+'px');
element.setAttribute('id', this.id+'_svg');
doc.getElementById(this.id).appendChild(element);
}

function ComposantSVG_getDocument()
{
if (isASVInstalled())
return getElementByIdInFrame(this.frameId,this.id+'_svg').getSVGDocument();
else
return getDocument(this.frameId);
}

function ComposantSVG_getDocumentRoot(f)
{
if (isASVInstalled())
{
var embed = getElementByIdInFrame(this.frameId,this.id+'_svg');
if (embed==null)
return null;
return embed.getSVGDocument().rootElement;
}
else
return getElementByIdInFrame(this.frameId,this.id+'_svg');
}

function ComposantSVG_clear()
{
var root = this.getDocumentRoot();
while (root.childNodes.length>0)
root.removeChild(root.firstChild);
}

function ComposantSVG_show()
{
getElementByIdInFrame(this.frameId,this.id).style.display = "";
}

function ComposantSVG_hide()
{
getElementByIdInFrame(this.frameId,this.id).style.display = "none";
}

function ComposantSVG_createTextNode(text)
{
if (this.document==null)
this.document = this.getDocument();
return createSVGTextNode(this.document,text);
}

function ComposantSVG_createElement(tag)
{
if (this.document==null)
this.document = this.getDocument();
return createSVGTextNode(this.document,tag);
}

function ComposantSVG(frameId,divId,width,height,blankFile)
{
this.frameId = frameId;
this.id = divId;
this.width = width;
this.height = height;
this.blankFile = blankFile;

this.initDivBind = ComposantSVG_initDivBind;
this.getDocument = ComposantSVG_getDocument;
this.getDocumentRoot = ComposantSVG_getDocumentRoot;
this.clear = ComposantSVG_clear;
this.show = ComposantSVG_show;
this.hide = ComposantSVG_hide;

this.createTextNode = ComposantSVG_createTextNode;
this.createElement = ComposantSVG_createElement;
}

FEDER Powered By FusionForge Collaborative Development Environment Charte d'utilisation / Nous contacter / Mentions légales Haut de page