IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

XML/XSL et SOAP Discussion :

[SVG] Effectuer une rotation d'un texte type 'tspan'


Sujet :

XML/XSL et SOAP

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2003
    Messages
    59
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2003
    Messages : 59
    Points : 50
    Points
    50
    Par défaut [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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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&#58;//www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
    <svg xmlns="http&#58;//www.w3.org/2000/svg" xmlns&#58;xlink="http&#58;//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&#58;href="#path"/>
        <text id="myText" fill="red">
            <textPath xlink&#58;href="#path">
                <tspan id="ma-relN67722" x="15.0" y="-5.0" text-anchor="start">&#91;0..N&#93;</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&#58;href="#inv_path"/>
        <text id="myText" fill="green">
            <textPath xlink&#58;href="#inv_path">
                <tspan id="ma-relN67722" x="15.0" y="-5.0" text-anchor="start">&#91;0..N&#93;</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&#40;0&#41;" text-anchor="start">foezhfohzoeho</text>
        <text x="-250" y="-400" transform="rotate&#40;180&#41;" 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

  2. #2
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2003
    Messages
    59
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2003
    Messages : 59
    Points : 50
    Points
    50
    Par défaut
    PS: un document SVG a une extension ".svg" pour être reconnu par Windows comme étant un document visualisable dans un navigateur Internet ayant le plugin SVG.

    Ainsi un double click permet de visualiser directement le résultat.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2003
    Messages
    284
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2003
    Messages : 284
    Points : 349
    Points
    349
    Par défaut
    As-tu essayer de mettre ton <text> dans un <g> avec l'attribut transform(angle, X, Y), avec X, Y les coordonnées du point à partir duquel faire la rotation ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <g transform="rotate&#40;180, X, Y&#41;">
      ...
    </g>
    Beau post en tout cas, ca mériterait d'etre stické en haut d'un nouveau forum SVG
    Nicolas

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2003
    Messages
    59
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2003
    Messages : 59
    Points : 50
    Points
    50
    Par défaut
    Oui j'ai effectué cette transformation via un "groupage" mais le problème c'est que la rotation est bien effectuée sur l'ensemble des tspan mais que le résultat n'apparaît pas à l'écran car le centre de rotation est le point 0,0 du graphique SVG général (le point supérieur gauche de l'écran en d'autres termes )

    Pour le moment, j'ai une "solution de fortune" : j'effectue une animation de rotation des tspan; avec cette animation je peux préciser le point de rotation (ici le centre de mon chemin "path"), la durée de l'animation (0s pour que ce soit 'instantané') et je "freeze" enfin le résultat.

    Alors cette solution fonctionne "bien" mais je ne sais pas si c'est vraiment très propre ou si la norme ne prévoit pas une autre solution car dans ce cas précis je ne désire pas faire une animation mais simplement une rotation par rapport à un point précis (le CIR : centre instantané de rotation : j'aimerai le préciser moi-même ===> car je le calcule dans un javascript )


    Enfin merci déjà pour cette première réponse.

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2003
    Messages
    59
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2003
    Messages : 59
    Points : 50
    Points
    50
    Par défaut
    Ca y est j'ai trouvé une autre solution plus élégante.

    Suivant la recommendation traduite :

    le type rotate(<angle-rotation> [<cx> <cy>]), qui spécifie une rotation de la valeur <angle-rotation> en degrés d'un point donné ;
    Si les paramètres optionnels <cx> et <cy> ne sont pas fournis, la rotation s'effectue par rapport à l'origine du système de coordonnées utilisateur courant. L'opération correspond à la matrice [cos(a) sin(a) -sin(a) cos(a) 0 0].
    Si les paramètres optionnels <cx> et <cy> sont fournis, la rotation s'effectue par rapport au point (<cx>, <cy>). L'opération équivaut à la spécification translate(<cx>, <cy>) rotate(<angle-rotation>) translate(-<cx>, -<cy>).

    Ainsi, j'ai affecté une rotation à mon élément "text" qui regroupe les "tspan", dans cette rotation je précise l'angle de 180° pour obtenir l'inversion et je précise le point de rotation qui est le centre de mon chemin et ça marche !

    Thx quand même.

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2003
    Messages
    284
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2003
    Messages : 284
    Points : 349
    Points
    349
    Par défaut
    Voui, je crois que c'est ce dont je te parlais dans le post précédent, avec X, Y les coordonnées du point de rotation
    Quoi qu'il en soit, pas sur que mon truc marche alors que le tien si, donc : Bien joué !
    Nicolas

Discussions similaires

  1. Effectuer une rotation sur deux axes
    Par zhouyu dans le forum OpenGL
    Réponses: 5
    Dernier message: 12/11/2012, 17h43
  2. Copier le contenu d'un tableau en effectuant une rotation
    Par Heureux-oli dans le forum Contribuez
    Réponses: 0
    Dernier message: 28/03/2010, 20h15
  3. Effectuer une rotation d'écran.
    Par adrien954 dans le forum Windows Forms
    Réponses: 1
    Dernier message: 08/10/2009, 10h41
  4. Effectuer une Rotation
    Par Halobox dans le forum SDL
    Réponses: 3
    Dernier message: 07/04/2007, 17h43
  5. Type de données pour effectuer une différence en vba
    Par snoopy69 dans le forum Access
    Réponses: 4
    Dernier message: 03/03/2006, 08h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo