Comment spécifier les x-y point de rotation lors de l'utilisation de animateTransform?

Je veux utiliser animateTransform pour faire pivoter une image SVG en permanence. Donc, ici, nous allons:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1024px" height="768px" enable-background="new 0 0 100 100" xml:space="preserve">
    <g transform="translate(100, 100)">
        <rect fill="#FE9FFF" width="100px" height="100px">
            <animateTransform attributeName="transform" type="rotate"
                from="0" to="360" dur="20s" repeatDur="indefinite"/>
        </rect>
    </g>
</svg>

Cela fonctionne.

Maintenant: je voudrais changer le ci-dessus, de sorte que le bloc tourne autour de son centre et pas de son coin supérieur gauche. Je sais que si je veux faire tourner le bloc statique autour de son centre, je peux le faire:

<g transform="rotate(30, 50, 50)">
  <rect fill="#FE9FFF" width="100px" height="100px">
  </rect>
</g>

Ma question est - comment puis-je gérer en continu d'une animation de rotation autour du pâté de maisons du centre? J'ai regardé le spec et un couple de d'autres questions connexes, mais je vais avoir de la difficulté à mettre en œuvre les explications fournies.

Merci d'avance.

OriginalL'auteur | 2011-03-15

  1. 9

    http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement

    "De", " par " et " à " attributs de prendre une valeur exprimée en utilisant la même syntaxe qui est disponible pour le type de transformation:

    (...)

    Pour un type="rotate", chaque valeur est exprimée sous la forme <tourner à angle> [<cx> <cy>]

    Vous pouvez spécifier le centre de la rotation si vous fournissez des 2 valeurs supplémentaires, cx et cy.

    Donc, pour votre bout de code, j'ai ajouter "50 50" dans le "de" et "à" attribut :

    <rect fill="#FE9FFF" width="100px" height="100px">
    <animateTransform attributeName="transform" type="rotate"
        from="0 50 50" to="360 50 50" dur="20s" repeatDur="indefinite"/>
</rect>

    Fonctionner avec la dernière version d'Opera, Safari et Chrome, également Firefrox 4 Beta et le Batik.

    OriginalL'auteur Planplan

  2. 0

    Pour être clair: ce que l'on cherche à atteindre est la rotation autour d'un centre qui est lui-même en cours de traduction. Je trouve que si j'ai un <animateTransform type=rotation>, je ne peux pas utiliser <animateMotion>, ni <animateTransform type=translate> pour effectuer la traduction simultanée. (Dernier Chrome ou Firefox) ne pas interpoler le centre de rotation désiré, résultant dans une "boucle de boucle" à la place. Cependant, à l'aide d'un simple <animer> pour chacune des coordonnées x,y, ne fonctionne pas comme souhaité; dans ce cas, <animateTransform type=rotation> interpole centre le long de x,y, chemin d'accès, aussi longtemps que vous le définissez la de= paramètre de l'angle de départ, commencez x et y de la position, et de configurer l'= paramètre les valeurs de fin.

    OriginalL'auteur Lex Lindsey