Atlas et SVG : comment les faire cohabiter
La semaine derniere, j'expliquais que l'on ne pouvais pas utiliser SVG, XHTML et Atlas ensemble
à cause d'un bug dans ATLAS !!! Le problème était que pour afficher un graphique SVG dans une page HTML il faut envoyer le document en tant qu'application/xml mais Atlas ne fonctionne plus dans ce cas ... Ayant besoin que cela fonctionne j'ai réfléchit au problème et trouvé une solution : il faut passer par une iframe. Cette solution résoud aussi un autre petit problème : en envoyant mon document en tant que application/xml pour Firefox il est nécessaire que le document soit conforme XHTML. J'utilise SVG pour créer un contrôle il aurait fallut que tous les developpeurs utilisant mon contrôle soient respectueux des standards et c'est malheureusement TRES loin d'être le cas.
Voyons alors plus en détails comment j'ai procéder. Puisque je fais un composant qui va générer du VML pour IE et du SVG pour les autres il est hors de question d'écrire quoi que ce soit en dur dans la page, tout ce que j'ai en c'est un div :
<div id="container">
</div>
Dans mon code JavaScript je rajoute dynamiquement une iframe pointant vers un document SVG
window.onload =
function(){
var container = document.getElementById('container');
var iframe = document.createElement('iframe');
iframe.src = 'SVG.aspx';
iframe.frameBorder = 0;
container.appendChild(iframe);
}
La page SVG.aspx est un trés simple document SVG (envoyé en tant que application/xml) voici le code complet :
<%
@ Page Language="C#" %><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<script runat="server">
protected void Page_Load(Object sender, EventArgs e)
{
Response.ContentType = "application/xml";
}
</script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
<style type="text/css">
.begin {stop-color:#F0F;}
.end {stop-color:#F00;}
</style>
<linearGradient id="gradient">
<stop class="begin" offset="0%"/>
<stop class="end" offset="100%"/>
</linearGradient>
<polygon fill="url(#gradient)" id="polygon" points="10,10 10,90 90,10" />
</svg>
J'ai donc réussit à afficher un graphique SVG dans une page Atlas :-) Il me reste maintenant a manipuler ce graphique via mon code JavaScript. Pour cela il faut s'abonner à l'evenement load de l'iframe puis on a accés à l'element que l'on souhaite :
window.onload = function(){
var container = document.getElementById('container');
var iframe = document.createElement('iframe');
iframe.src = 'SVG.aspx';
iframe.frameBorder = 0;
container.appendChild(iframe);
iframe.onload = function(){
var polygon = this.contentDocument.getElementById('polygon');
var point = polygon.ownerSVGElement.createSVGPoint();
point.x = 90;
point.y = 90;
polygon.animatedPoints.appendItem(point);
}
}
Je peux désormais continuer à m'amuser avec SVG/VML et Atlas :-)