[CSS & SVG] Appel de class

Bonjour,

J'ai un document svg auquel est attaché une feuille css. Malheureusement je n'arrive pas à appliquer les style de ma feuille css à mes éléments svg.

SVG:

Code:

---

<rect class="btn_menu" id="btn_select" height="20" width="50" x="0" y="0" onclick="setAction('select')" />

---

CSS:

Code:

---

1 2 3 4 5

rect.btn_menu { fill:yellow; stroke:black; stroke-width:1px; }

---

Si je ne définit dans mon css seulement "rect" ça fonctionne, l'inconvénient c'est que je ne souhaite pas que ce style soit appliqué à TOUS les rectangles.

Je suis sur IE 6, avec le Plug SVG Viewer d'Adobe.

Merci. :roll:

Et si tu enlève le rect de rect.btn_menu ?

J'ai deja essayé et ça ne fonctionne pas... Je vais me tirer une balle...

J'ai ça en en-tête

Code:

---

1 2 3 4 5 6 7

<?xml version="1.0" standalone="no" ?> <?xml-stylesheet href="/templates_t/css/style.css" type="text/css"?>   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [          <!ENTITY ns_svg "http://www.w3.org/2000/svg">         <!ENTITY ns_xlink "http://www.w3.org/1999/xlink">  ]>

---

Même en plaçant le css dans des balises

Code:

---

1 2 3

<style type="text/css"><![CDATA[  ]]></style>

---

ça ne fonctionne pas..

Pour info, j'ai un "Bad CSS Selector" qui s'affiche dans la barre d'état sur IE 6.

Peut-être est-ce un problème de namespace...

FAQ XML: Qu'est ce qu'un espace de noms (namespace) ?

J'ai cherché toute la journée et je n'ai rien trouvé de spécial... ceux que j'ai placé sont correct et à ma connaissance il n'en existe pas pour le css...

Je suis un peu au bout du rouleau avec ce CSS, j'aimerais bien optimisé mon code... :aie:

Je relance ma question.
Etrangement l'appel de la class fonctionnement parfaitement sur firefox, mais IE je peux me brosser, alors je dois avouer que ça me soul pas mal de devoir mettre un attribut style à chaque élément.

Avez-vous une solution ? une piste ? une information m'expliquant pouquoi ça ne marche sur IE ?

Dans la barre d'état il y marqué "Sélecteur CSS incorrect"... Alors oui IE c'est de la daube... mais a par quelque details minime c'est lui qui gére le mieux le SVG pour le moment...

C'est un bug du plugin SVG d'Adobe, il ne supporte pas les caractères underscore ( _ ) dans les noms de classes CSS ;)

Au passage il existe un autre bug assez complexe:

Si on charge une image externe dans un document SVG (élément 'image') et que c'est une image de type raster (fichiers de type: image/png, image/jpeg, image/gif, etc.) et qu'on souhaite dynamiquement la changer via javascript (supprimer l'élément et en recréer un nouveau, ou changer l'attribut xlink:href)

Il faut s'assurer que l'image est chargée complètement avant de la supprimer, sinon le plugin plante et Internet Explorer avec...

La technique c'est de cacher l'élément dom image et d'utiliser une instance de l'objet Image javascript en lui passant l'url de l'image distante et faire du pooling :

var image = new Image();
image.src = url;

puis vérifier toutes les x secondes l'attribut image.complete

Si il est à true, on peut enfin supprimer pour de bon l'élément dom image de l'arbre ou le réutiliser pour une autre image en changeant l'url.

Le mieux c'est de gérer un mini garbage collector d'images en javascript avec cette technique ;)

Adobe SVG ou comment passer des nuits blanches en debug...

En espérant que ça profite au plus grand nombre...

François Weykmans

Ah ben merci... Ca marche nickel, je suis choqué par ce bug en tout cas...

Un grand MERCI à toi :)