SVG animateTransform конфликтует с преобразованием

Я пробую некоторые анимации и преобразования в изображении SVG.

Я пытаюсь перевести и изменить размер и перевести путь, а также анимировать его вращение.

Похоже, я могу только переводить и изменять размер или вращать за раз. Если пробую их все вместе то перевод и ресайз не держат: если убрать анимацию то они перемещаются и нужного размера.

Это поведение одинаково для Linux и OSX, а также для FF и Safari.

пример

            <use id="tengear" fill="#ffffff" stroke="#E2E2E2" stroke-width="3" transform="scale(0.40)translate(62, 180)" style="filter:url(#distanceBlurFar)" xlink:href="#tengearuse">
            <animateTransform
                attributeType="XML"
                attributeName="transform"
                type="rotate"
                from="0,162,280" to="360,162,280"
                begin="0s" dur="11"
                repeatCount="indefinite"/>
        </use>

Он должен быть маленьким и перемещаться, а также вращаться. Однако он большой и не двигается, а вращается.

            <use id="tengear" fill="#ffffff" stroke="#E2E2E2" stroke-width="3" transform="scale(0.40)translate(62, 180)" style="filter:url(#distanceBlurFar)" xlink:href="#tengearuse">
        </use>

Этот перемещается и вращается, но не вращается.

Может ли кто-нибудь помочь мне, как заставить это работать?

* вам нужно будет предположить, что использование и другие ссылки действительны

Полный исходный код


svg
person Doug Miller    schedule 08.11.2010    source источник
comment
изменить ответ на комментарий Питера   -  person Doug Miller    schedule 08.11.2010

Ответы (2)


arrow_upward
2
arrow_downward

Оказывается, это была проблема с RTFM.

Перейдите к спецификации и прочитайте о add=sum и add=replace

Теперь это читается так:

            <use id="tengear" fill="#ffffff" stroke="#E2E2E2" stroke-width="2.5" transform="scale(0.25) translate(390, 360)" style="filter:url(#distanceBlurClose)" xlink:href="#tengearuse">
            <animateTransform
                attributeType="XML"
                attributeName="transform"
                type="rotate"
                from="0,390,360" to="360,390,360"
                begin="0s" dur="11"
                repeatCount="indefinite"
                additive="sum"/>
        </use>
person Doug Miller    schedule 09.11.2010

arrow_upward
-1
arrow_downward

Непонятно, что вы пытаетесь сделать, и было бы полезно, если бы вы сократили свой пример до размера, позволяющего разместить его здесь. Звучит так, как будто вы должны использовать animateTransform и animateMotion. Я часто начинаю с того, что нахожу пример, который уже работает, а затем постепенно модифицирую его, чтобы включить в него свои собственные требования. И всегда используйте как можно меньше функций

См. http://www.w3schools.com/svg/el_animatetransform.asp.

person peter.murray.rust    schedule 08.11.2010