Tue, 8 Sep
SvgDocument Objet
Bon soyons franc .... svgDocument n'existe pas en vérité , sauf lors de l'utilisation
du viewer Adobe ASV !
Par contre l'objet SVGDocument existe bien et référence l'objet Document de notre application.
Et c'est bien lui qui nous intéresse !
L'objet Document référence le conteneur principal contenant votre graphe SVG. Il ne faut pas le confondre avec la racine <svg> de votre document. C'est la propriété window.document de votre fichier préfixé .svg.
Mais tout n'est pas si simple si votre document Svg est inscrit dans un document Html. En effet la valeur de window.document devient HtmlDocument dans l'arbre DOM.
De plus, si votre navigateur utilise comme viewer svg, l'extension Adobe svg viewer, alors ce dernier va créer automatiquement la propriété svgDocument. Pour les autres svgDocument n'existe pas en tant que propriété de l'objet principal window.
Svg Standalone
Commençons par explorer les différents comportements pour un document Svg seul. (non inscrit dans
une page html).
Pour cela créons de simples alertes javascript.
Le but est de savoir référencer notre document quelque soit le navigateur et le viewer utilisé.
Alors que vaut svgDocument ?
alert(svgDocument)
Comme on s'y attend, sous Firefox, le scritp javascript d'alerte retourne une erreur :
svgDocument is not defined
Sous Internet Explorer, avec le viewer adobe Svg, la même alerte retoune :
[object SVGDocument]
L'objet svgDocument existe donc bien sous IE+ASV et à la valeur SVGDocument.
mais provoque une erreur sous Firefox.
Le debug d'Opera est un peu plus "verbose" mais ne reconnais pas non plus svgDocument.
Undefined variable: svgDocument
Comme l'objet window est l'objet global que vaut une alert sur window.svgDocument.
Sous Internet explorer, svgDocument est bien reconnu comme propriété de l'objet global window, et a comme valeur SVGDocument.
Sous Opera et Firefox, l'alerte retourne que cette propriété est undefined.Mais on s'en doutait un tout petit peu.
alert(window.document)
Le document svg en tant que document seul (standalone) et non inscrit dans un autre type de document tel Html, est donc l'objet window.document et sa valeur est la même quelque soit le navigateur utilisé.
[object SVGDocument]
C'est bien l'objet dont nous avons besoin...
Donc si la propriété window.svgDocument est indéfinie elle prendra la valeur de
window.document.
Ainsi nous somme sûr d'avoir une variable globale svgDocument la même pour tous.
Pour rappel un variable globale est une propriété de l'objet global window.
if(!window.svgDocument)
window.svgDocument = window.document;
Remarque
Un test avec le viewer Renesis (examotion) retourne une erreur de script ...
Bon ... mais je n'ai pratiquement jamais utilisé ce viewer vu qu'il n'a jamais été disponible pour les
ditribution *nux !
Il est (était) pourtant plein de promesse avec la disparition programmmée d'ASV!
Le navigateur Chrome (svg natif) que j'espère sous les *nux très bientôt, ne connait pas non plus svgDocument avant de l'avoir initialisé.
IE6 7 et 8 + ASV ont heureusement le même comportement.
Mais que se passe t-il nous incluons ce Svg dans un page html ?
Window est toujours la fenetre, mais ici de notre navigateur ! Et donc window.document
devrait être le document Html contenant notre Svg ...
Testons cela !
Svg inscrit dans une page Html
Pour cela nous allons inscrire directement notre document Svg a l'aide de la future balise standard embed. Notre document Svg inscrit se présente comme ceci :
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
//alert(svgDocument);
if(!window.svgDocument)
window.svgDocument = window.document;
alert(svgDocument);
]]>
</script>
</svg>
Eh bien non !!!
Et c'est normal, la fenêtre est pris comme une "frame" (ou cadre).Mais dans un cas (standalone) le Svg n'a pas de parent et
dans l'autre (inscrit) la parent du cadre contenant le document Svg est la fenetre contenant le docment Html.
Mais cela devient important lorsque l'on veut communiquer entre les differents documents.
On peut vérifier cela à l'aide des propriétés parent ou top
En affichant le résultat d'une alerte :
alert(window.parent.document);
En cas d'un document Svg :
[object SVGDocument]
Et en cas d'un document inclus dans une page Html :
[object HTMLDocument]
On voit facilement le avantages de pouvoir retrouver les différentes fenêtres et documents afin de pouvoir interagir entre eux.
Mais top est normalement différent de parent.
Si une fenêtre n'a pas de parent, sa propriété parent est une référence vers elle-même.
top fait référence à la fenêtre du plus haut niveau (the top of the frames hierarchy)... mais cela ne marche pas tout à fait de
la même façon avec le Svg et les différents navigateurs!
Il est à noter que IE 6 , 7 et 8 affiche pour les 2 alertes uniquement comme indication :
[object]
Il reste le cas d'un Svg inclus directement dans une page Html
Svg inline
Le svg "enligne" est ce que tout le monde souhaite dans l'absolu.
Dans l'absolu j'aimerais jouer comme Chico Buarque aussi !
On va attaquer en dur et intégrer un bout (fragment) de code Svg tel quel dans la page html, et vu que je suis dans une page html ...
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0
width="100" height="100"
fill="red" />
</svg>
Aucun ne se plante (c'est aussi çà le Html), mais rien ne s'affiche ! Mon IDe Aptana par contre me dit :
<svg> et <rect> is (are) not recognized !
Et c'est normal ... nous avons défini notre svg dans le même espace de nom que notre html.
On va modifier cela en donnant un espace de nom spécifique à nos balises de code svg!
Vous pouvez chosir celle que vous désirez ...
J'ai choisi svg ...
<svg:svg version="1.1"
baseProfile="full"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg:rect x="0" y="0"
width="100" height="100"
fill="red" />
</svg:svg>
Rien ne s'affichera tant que l'extension de votre page n'est pas .xhtml.
Faites le test et changer juste l'extension.
Opera et Firefox s'en sorte bien ... mais IE avec le plugin ASV chez moi plante.
Internet n'aime pas du tout cette extension.
Pour plus d'information repotez vous à l'article sur le wiki anglais :
Inline SVG
Et surtout le passage concernant le hack ASV et les specs d'Adobe+IE :
The first is a hack to tell Internet Explorer to use ASV to render the SVG tags. This is done by using the IMPORT processing instruction to associate ASV with the SVG "namespace".
The second thing that has to be done is to use a namespace prefix for all the SVG tags. Although redefining the default namespace as shown in the example at the top of this page conforms to the standards and works in Mozilla, IE+ASV doesn't support it.
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
Maintenant si nous rajoutons notre code javascript dans le Svg "in line", toute les alertes retournent :
alert(svgDocument);
alert(window.top.document);
alert(window.parent.document);
[object HTMLDocument]
Et toujours normal puisque notre code window.svgDocument = window.document; indique de prendre la valeur window.document si svgDocument n'existe pas ... et c'est le cas pour les navigateur ayant le svg natif.
Oauis ... c'est pas joué le svg directement dans une page (X)html.
Mais .... A suivre !
