Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

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 :-)
 
Si vous voulez en savoir plus sur la manipulation du DOM SVG je vous conseille cette doc en français : La corrélation du langage ECMAScript avec SVG
Posted: dimanche 20 août 2006 19:21 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01