[SVG] Effectuer une rotation d'un texte type 'tspan'
Voilà, pour ceux qui ne savent pas ce qu'est le SVG c'est un langage dérivé du XML et dont les balises sont interprétées pour représenter des graphiques vectoriels adaptables dans un navigateur Internet...
On pourrait dire que le SVG c'est du Flash écrit en XML et scripté avec du Javascript (ecma...) mais qui ne possède pas d'interfaces graphiques pour le développement, il faut donc tout écrire "à la main".
Comme je ne trouvais pas de forum plus adéquat, j'ai pensé que celui-ci ferait l'affaire surtout que le SVG est aussi du XML. A la rigueur, il y a le forum "HTML / XHTML / CSS" mais si un admin pense que mon topic serait mieux là bas qu'ici, il peut très bien le déplacer :)
Bon, pour ceux qui pourraient m'aider :
J'ai besoin d'effectuer une rotation d'un texte de type "tspan" par rapport à un "path".
Voici un code exemple :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path" d="M 50 200 500 100" fill="green" stroke="green" stroke-width="2"/>
<path id="inv_path" d="M 500 100 50 200" fill="green" stroke="green" stroke-width="2"/>
</defs>
<use xlink:href="#path"/>
<text id="myText" fill="red">
<textPath xlink:href="#path">
<tspan id="ma-relN67722" x="15.0" y="-5.0" text-anchor="start">[0..N]</tspan>
<tspan id="mb-relN67722" x="450" y="10.0" text-anchor="end">1</tspan>
<tspan id="rn-relN67722" x="250" y="-5.0" text-anchor="middle">RelT004</tspan>
<tspan id="ta-relN67722" x="15.0" y="10.0" text-anchor="start">availableCompatibilities</tspan>
<tspan id="tb-relN67722" x="450" y="-5.0" text-anchor="end">requiredCategory</tspan>
</textPath>
</text>
<use xlink:href="#inv_path"/>
<text id="myText" fill="green">
<textPath xlink:href="#inv_path">
<tspan id="ma-relN67722" x="15.0" y="-5.0" text-anchor="start">[0..N]</tspan>
<tspan id="mb-relN67722" x="450" y="10.0" text-anchor="end">1</tspan>
<tspan id="rn-relN67722" x="250" y="-5.0" text-anchor="middle">RelT004</tspan>
<tspan id="ta-relN67722" x="15.0" y="10.0" text-anchor="start">availableCompatibilities</tspan>
<tspan id="tb-relN67722" x="450" y="-5.0" text-anchor="end">requiredCategory</tspan>
</textPath>
</text>
<text x="250" y="400" transform="rotate(0)" text-anchor="start">foezhfohzoeho</text>
<text x="-250" y="-400" transform="rotate(180)" text-anchor="end">foezhfohzoeho</text>
</svg> |
J'aimerai trouver une solution pour effectuer une rotation du texte affiché en vert pour qu'il soit dans le même sens que le texte affiché en rouge.
Donc d'affectuer une rotation de 180° par rapport au centre du chemin pour que le texte soit toujours parallèle au "path" et inversé pour être lisible...
Le but à terme, c'est de modifier l'affichage à l'aide d'un Javascript via l'implémentation DOM correspondante.
Ce que j'ai déjà essayé :
- mettre une rotation du groupe de texte "text" contenant les tspan; le problème c'est que le résultat n'est pas du tout affiché le long du chemin "path" et qu'il se trouve en-dehors de l'écran (en fait, il y a une rotation par rapport au point 0,0 de l'ensemble du plan)
- mettre une rotation pour chaque "tspan"; le problème c'est que seul le premier caractère du texte balisé est retourné !?
- effectuer un mouvement de rotation, une animation où l'on peut préciser le point de rotation et la durée de l'animation... Le problème c'est que je n'arrive pas à figer le résultat d'une telle rotation; c'est-à-dire qu'une fois que l'animation a "tournée", hé bien les éléments SVG qui ont subis cette animation se remettent dans leur état de départ.
Pour des infos sur le SVG - W3C Recommendation : http://www.w3.org/TR/SVG11/
Pour visualiser le résultat d'un document SVG dans un navigateur Internet, consultez le site de Adobe : http://www.adobe.com/svg/
Le plugin SVG de Adobe est gratuit tout comme le SVG...
Pour ceux qui ont Internet Explorer, le résultat s'affiche directement; pour ceux qui utilise Mozilla / Firefox, il faut activer le module SVG du navigateur pour qu'il utilise le plugin d'Adobe.
Article en anglais : http://rr.latenightpc.com/wp/archives/2005/06/09/whats-great-about-firefox-deer-park-and-how-to-turn-it-off/
Installation : http://www.latenightpc.com/firefox-svg-toggle/svgimpltoggle.xpi
Pour plus d'infos, consultez aussi le site : http://svgfr.org/?rub=news
Voilà, merci d'avance aux codeurs SVG de bien vouloir m'aider :) :D
