Re: SVG et mozila
Zuthos a écrit :
Bonjour, j'essaye de visionner des sites utilisant la technologie svg.
Hors, certain site passe d'autre non.
Il m'affiche alors une erreur m'indiquant que le fichier n'est pas
conforme.
ainsi , par exemple ici: http://www.svgfr.org/?rub=tuto/pro&id=24
j'ai en lieu et place de l'iage svg ce texte laconique:
Christophe Alonso a écrit :
Par contre sur cette page, je n'ai aucun problème de mon côté (en sarge
avec mozilla)
Tu es sur que tu as bien regardé ? moi il me dit qu'il lui manque un
plugin et m'affiche le petit puzzle à la place de l'image SVG...
Erreur d'analyse XML : préfixe non limité à un espace de noms
Emplacement : http://www.svgfr.org/tutoriels/progressifs/64.svg
Numéro de ligne 51, Colonne 3 : <a xlink:href="http://www.w3.org/";
target="_top" >
--^
Ca c'est parce que le parseur XML de firefox est extrêmement strict,
pour utiliser <a xlink:href="http://host.domain.tld";>Un lien</a> on doit
normalement définir l'espace de noms dans la balise svg comme ceci :
<svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>. Dans ce cas le fichier
s'affichera correctement.
J'ai essayer d'installer le plug-in d'adobe, mais rien a faire (il ne
semble pas être pris en compte).
Si quelqu'un a une idée
merci d'avance
Moi aussi j'ai essayé il y a longtemps par curiosité et je n'avais pas
réussi, là j'ai re-essayé et j'ai finit par arriver a le faire
fonctionner sur mozilla (pas sur iceweasel) mais le résultat est très
médiocre il n'y a que les 2 rectangles qui s'affichent, même pas les
textes "bouton 1" et "bouton 2"... c'est un vieux truc en bêta qu'il
vaut mieux oublier.
Francescu GAROBY-COLONNA a écrit :
Bonsoir,
Cela ne serait-il pas dû au fait que Gecko ne gère pas la totalité du
format SVG?
Ca c'est vrai, le support dans gecko n'est que partiel, par exemple il
ne gère pas encore la balise animate donc pas d'animation avec gecko
mais avec le xmlns:xlink="http://www.w3.org/1999/xlink"; qui va bien,
l'image est affichée correctement (mais sans les animations).
J'ai essayé avec Konqueror, le menu est affiché, l'animation et en
partie jouée au chargement (alors que les évènements ne sont pas
déclanchés) et ça reste bloqué dans un état bizare, l'actualisation de
la page provoque le plantage de Konqueror. Bref c'est indécrottable...
je préfère de loin le support partiel de Mozilla.
Actuellement le navigateur supportant le mieux SVG sous linux est Opera
(deb http://deb.opera.com/opera/ stable non-free):
Les seuls problèmes observés sont :
* Le cercle vert n'apparaît pas à cause de problèmes d'ecmascript :
getTarget getOwnerDocument getClientX, tout ça c'est du dom
proprio M$... ce genre d'erreur est sûrement courante dans les
fichiers SVG vu que le couple Internet Explorer + Adobe SVGViewer
est pratiquement le seul qui fonctionne bien pour le moment. Ca
fait une bonne raison de tester sur Opera qui permet de détecter
ce genre d'erreurs et de produire des fichiers qui seront
compatibles avec les navigateurs standards quand ils auront un
support suffisant du SVG. La solution est d'utiliser ce genre de
test : SVGDocument = LoadEvent.getTarget ?
LoadEvent.getTarget().getOwnerDocument() :
LoadEvent.target.ownerDocument;
* L'animation de la taille du text ne fonctionne pas : bizarre, il
semble que l'attributs de style css garde le dessus sur
l'attributs de style de la balises SVG... ce n'est pas très
cohérent car pour les couleurs (fill et stroke) il n'y a pas ce
problème probablement du fait que font-size est un attribut CSS1
contrairement aux deux autres. En même temps si on écrit <font
style="font-size: 10px" size="20px">test</font> dans un fichier
XHTML test s'affiche en 10px... (j'avais jamais essayé avant). La
solution est de mettre l'attribut de style initial directement
dans la balise text et d'enlever celui de la feuille de style.
Pour en revenir à Mozilla, voici trouverez ici
<http://developer.mozilla.org/fr/docs/SVG_dans_Firefox#Statut_d.27impl.C3.A9mentation_des_.C3.A9l.C3.A9ments>
l'état actuel de l'implémentation SVG de firefox, où l'on peut voir
qu'aucun élément du module animation n'est encore implémenté. Il est
toutefois possible de pallier à ce manque avec un peut d'ecmascript...
Voilà le code de l'image donné en exemple par Zuthos corrigé de sorte
qu'il fonctionne de la même manière sur IE, Opera, et Mozilla,Firefox et
autres navigateurs basés sur Gecko. La fonction animate pour Gecko
alourdie pas mal le code quand même mais ça monter que c'est faisable.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
<svg width="200" height="85"
onload="initialise(evt);setInterval('deplace()',25)"
xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
<defs>
<script type="text/ecmascript"><![CDATA[
var SVGDocument = null;
function initialise(LoadEvent){
SVGDocument = LoadEvent.getTarget ?
LoadEvent.getTarget().getOwnerDocument() : LoadEvent.target.ownerDocument;
if(parent.navigator.userAgent.match(/rv:1\.[8|9].*Gecko/))
animate();
}
var dx = 0;
var vitesse = 5;
var destinationX = 240;
function deplace(){
var cercle = SVGDocument.getElementById('cercleVert');
var X = cercle.getAttribute('cx') * 1;
dx = vitesse * (destinationX - X) /100;
X += dx;
cercle.setAttribute('cx', X);
}
function mouvementSouris(MouseEvent){
destinationX = MouseEvent.getClientX ? MouseEvent.getClientX()
: MouseEvent.clientX;
}
function retour(){
destinationX = 240;
}
function animate(){
var xlinkns = "http://www.w3.org/1999/xlink";;
var a1 = document.getElementsByTagName('a')[0];
var a2 = document.getElementsByTagName('a')[1];
window.url1 = a1.getAttributeNS(xlinkns,"href");
window.url2 = a2.getAttributeNS(xlinkns,"href");
a1.setAttributeNS(xlinkns,"href","javascript:void(0)");
a2.setAttributeNS(xlinkns,"href","javascript:void(0)");
window.cercle = document.getElementById('cercleVert');
window.t1 = document.getElementById('t1');
window.t2 = document.getElementById('t2');
window.g = document.getElementsByTagName('g')[0];
window.txt1 = document.getElementsByTagName('text')[0];
window.txt2 = document.getElementsByTagName('text')[1];
window.txt1.setAttribute('x','56px');
window.txt2.setAttribute('x','156px');
t1.onclick = function(){
for(var i=30;i>=0;i-=2.4)
setTimeout("window.cercle.setAttribute('r',"+i+")",(30-i)/2.4*40);
setTimeout("t1.onmouseout();parent.location.assign(window.url1)",500);
};
t2.onclick = function(){
for(var i=30;i>=0;i-=2.4)
setTimeout("window.cercle.setAttribute('r',"+i+")",(30-i)/2.4*40);
setTimeout("t2.onmouseout();window.g.style.opacity=0;window.cercle.setAttribute('r',30);parent.location.assign(window.url2)",500);
};
t1.onmouseover = function(){
this.setAttribute('class','');
for(var i=0;i<=8;i++){
var r=parseInt(255-(255-245)/8*i);
var g=parseInt(235+(247-235)/8*i);
var b=parseInt(213+(255-213)/8*i);
setTimeout("window['"+this.id+"'].setAttribute('fill','rgb("+r+","+g+","+b+")')",i*42);
}
for(var i=0;i<=8;i++){
var r=parseInt(255-(255-56)/8*i);
var g=parseInt(131-(131-76)/8*i);
var b=parseInt(9+(198-9)/8*i);
setTimeout("window['"+this.id+"'].setAttribute('stroke','rgb("+r+","+g+","+b+")')",i*42);
}
var txtId=this.id.replace(/t/,'txt');
var txt = window[txtId];
txt.setAttribute('class','');
txt.setAttribute('font-family','Tahoma, Verdana, Helvetica,
Arial, sans-serif');
txt.setAttribute('font-size','13px');
txt.setAttribute('pointer-events','none');
txt.setAttribute('fill','#E64100');
txt.setAttribute('text-anchor','middle');
for(var i=1;i<=10;i++){
setTimeout("\
window['"+txtId+"'].setAttribute('x',"+((Number(this.id.replace(/t/,''))-1)*100+(56+i/3))+");\
window['"+txtId+"'].setAttribute('y',"+(50+0.1*i)+");\
window['"+this.id.replace(/t/,'txt')+"'].setAttribute('font-size','"+(13+0.5*i)+"px');\
window.cercle.setAttribute('r',30);\
window.g.style.opacity ="+i*0.04+"\
",i*40);
}
};
t1.onmouseout = function(){
for(var i=0;i<=8;i++){
var r=parseInt(245+(255-245)/8*i);
var g=parseInt(247-(247-235)/8*i);
var b=parseInt(255-(255-213)/8*i);
setTimeout("window['"+this.id+"'].setAttribute('fill','rgb("+r+","+g+","+b+")')",i*42);
}
for(var i=0;i<=8;i++){
var r=parseInt(56+(255-56)/8*i);
var g=parseInt(76+(131-76)/8*i);
var b=parseInt(198-(198-9)/8*i);
setTimeout("window['"+this.id+"'].setAttribute('stroke','rgb("+r+","+g+","+b+")')",i*42);
}
var txtId=this.id.replace(/t/,'txt');
for(var i=1;i<=10;i++){
setTimeout("\
window['"+txtId+"'].setAttribute('x',"+((Number(this.id.replace(/t/,''))-1)*100+(59-i/3))+");\
window['"+txtId+"'].setAttribute('y',"+(51-0.1*i)+");\
window['"+this.id.replace(/t/,'txt')+"'].setAttribute('font-size','"+(18-0.5*i)+"px');\
window.g.style.opacity ="+(0.4-i*0.04)+"\
",i*40);
}
retour();
};
t2.onmouseover = t1.onmouseover;
t2.onmouseout = t1.onmouseout;
}
]]></script>
<style type="text/css"><![CDATA[
text.menu{
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
pointer-events: none;
fill: #E64100;
text-anchor: middle;
}
rect.menu{
fill: #FFEBD5;
stroke: #FF8309;
stroke-width: 1px;
}
]]></style>
</defs>
<a xlink:href="http://www.w3.org/"; target="_top" >
<rect class="menu" id="t1" x="9" y="32" width="76px" height="26px"
rx="3.8px" ry="1.3px" onmousemove="mouvementSouris(evt)"
onmouseout="retour()">
<animateColor attributeName="fill" attributeType="CSS"
dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,235,213)"
to="rgb(245,247,255)"/>
<animateColor attributeName="fill" attributeType="CSS"
dur="0.3s" begin="mouseout" fill="freeze" from="rgb(245,247,255)"
to="rgb(255,235,213)"/>
<animateColor attributeName="stroke" attributeType="CSS"
dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,131,9)"
to="rgb(56,76,198)"/>
<animateColor attributeName="stroke" attributeType="CSS"
dur="0.3s" begin="mouseout" fill="freeze" from="rgb(56,76,198)"
to="rgb(255,131,9)"/>
</rect>
</a>
<text class="menu" x="48px" y="50px" font-size="13">
Bouton1
<animate attributeType="XML" attributeName="font-size" fill="freeze"
from="13" to="18" dur="0.4s" begin="t1.mouseover"/>
<animate attributeType="XML" attributeName="font-size" fill="freeze"
from="18" to="13" dur="0.4s" begin="t1.mouseout"/>
<animate attributeType="XML" attributeName="y" fill="freeze"
from="50" to="51" dur="0.4s" begin="t1.mouseover"/>
<animate attributeType="XML" attributeName="y" fill="freeze"
from="51" to="50" dur="0.4s" begin="t1.mouseout"/>
</text>
<a xlink:href="http://www.w3.org/Graphics/SVG/Overview.htm8";
target="_top" >
<rect class="menu" id="t2" x="109" y="32" width="76px" height="26px"
rx="3.8px" ry="1.3px" onmousemove="mouvementSouris(evt)"
onmouseout="retour()">
<animateColor attributeName="fill" attributeType="CSS"
dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,235,213)"
to="rgb(245,247,255)"/>
<animateColor attributeName="fill" attributeType="CSS"
dur="0.3s" begin="mouseout" fill="freeze" from="rgb(245,247,255)"
to="rgb(255,235,213)"/>
<animateColor attributeName="stroke" attributeType="CSS"
dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,131,9)"
to="rgb(56,76,198)"/>
<animateColor attributeName="stroke" attributeType="CSS"
dur="0.3s" begin="mouseout" fill="freeze" from="rgb(56,76,198)"
to="rgb(255,131,9)"/>
</rect>
</a>
<text class="menu" x="148px" y="50px" font-size="13">
Bouton2
<animate attributeType="XML" attributeName="font-size" fill="freeze"
from="13" to="18" dur="0.4s" begin="t2.mouseover"/>
<animate attributeType="XML" attributeName="font-size" fill="freeze"
from="18" to="13" dur="0.4s" begin="t2.mouseout"/>
<animate attributeType="XML" attributeName="y" fill="freeze"
from="50" to="51" dur="0.4s" begin="t2.mouseover"/>
<animate attributeType="XML" attributeName="y" fill="freeze"
from="51" to="50" dur="0.4s" begin="t2.mouseout"/>
</text>
<g opacity="0">
<circle pointer-events="none" id="cercleVert" cx="240" cy="45"
r="30" fill="#e2ffdf" stroke="#066120" stroke-width="1">
<animate attributeType="XML" attributeName="r" fill="freeze"
from="30" to="0" dur="0.5s" begin="t1.click;t2.click;"/>
</circle>
<animate attributeType="XML" attributeName="opacity" fill="freeze"
from="0" to="0.4" dur="0.4s" begin="t1.mouseover;t2.mouseover;"/>
<animate attributeType="XML" attributeName="opacity" fill="freeze"
from="0.4" to="0" dur="0.4s" begin="t1.mouseout;t2.mouseout;"/>
</g>
</svg>
Reply to: