Как указать точку вращения x-y при использовании animateTransform? - PullRequest
Новая
       24

Как указать точку вращения x-y при использовании animateTransform?

8 голосов
/ 15 марта 2011

Я хочу использовать animateTransform для непрерывного вращения изображения SVG. Итак, поехали: 

<?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>

Это работает.

Теперь: я бы хотел изменить вышеприведенное, чтобы блок вращался вокруг своего центра, а не верхнего левого угла. Я знаю, что если я хочу статически вращать блок вокруг его центра, я могу сделать это: 

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

Мой вопрос - как мне управлять непрерывным анимированным вращением вокруг центра блока? Я рассмотрел spec и пару других связанных вопросов по SO, но у меня возникли проблемы с выполнением предоставленных объяснений.

Заранее спасибо.

Ответы [ 2 ]

10 голосов
/ 15 марта 2011

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

Атрибуты 'from', 'by' и 'to' принимают значение, выраженное в том же синтаксисе, который доступен для данного типа преобразования:
(...)
Для type = "rotate" каждое отдельное значение выражается как[ ]

Вы можете указать центр вращения, если укажите 2 дополнительных значения, cx и cy.

Итак, для вашего кода,Я добавляю «50 50» в атрибуты «from» и «to»: 

<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>

Он работает с последними версиями Opera, Safari и Chrome, а также Firefrox 4 Beta и Batik.

0 голосов
/ 20 марта 2014

Чтобы быть ясным: то, что мы пытаемся достичь, это вращение вокруг центра, который сам переводится.Я считаю, что если у меня естьЯ не могу использовать , нивыполнить синхронный перевод.Он (последний Chrome или Firefox) не интерполирует центр вращения, как хотелось бы, вместо этого получается «петля петли».Однако использование простого для каждой из координат x, y работает как нужно;в этом случае,интерполирует центр вдоль пути x, y, пока вы устанавливаете параметр from = в начальный угол, начинаете x и начинаете y, и устанавливаете для параметра to = конечные значения.

...