animateTransform не работает

Я пытаюсь создать группу SVG, следуя пути SVG и преобразуя анимированную группу. Я пытаюсь сделать преобразование #moon с animateTransform, но ничего не работает.animateTransform не работает

Может ли кто-нибудь выявить проблему?

<svg width="100%" height="100%" viewBox="0 0 570 594" preserveAspectRatio="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="padding: 0 10px 0 18px;fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;"> 
    <path id="orbit" d="M146.719,183.637l-18.408,-7.796l-13.233,-6.252l-12.327,-6.302l-18.44,-9.379l-12.42,-11.695l-16.36,-10.421l-15.546,-10.511l-12.326,-12.281l-14.415,-14.728l-8.426,-16.45l-4.168,-14.276l2.084,-14.272l6.297,-11.239l8.019,-10.103l12.013,-6.302l16.682,-8.426l16.356,-4.169l22.804,-4.217l27.474,-4.168l22.03,0l21.75,1.042l24.881,1.042l20.524,1.042l26.875,3.126l27.917,5.211l41.477,9.293l37.047,10.702l41.159,12.782l35.33,14.012l19.808,8.426l25.874,12.554l18.86,11.423l18.578,11.556l18.815,14.105l17.777,16.951l12.233,16.718l8.345,17.187l1.091,27.64l-7.434,8.207l-11.194,10.466l-15.595,10.559l-24.221,7.844l-22.609,5.211l-30.925,3.265l-43.658,0l-32.546,-2.085" style="fill:none;stroke-width:0px;stroke:#ff6060;"/> 
    <g id="moon" style="transform: translateY(-130px) translateX(-53px);"> 
     <path d="M77.39,295.34c0,-10.683 -8.658,-19.343 -19.342,-19.343c-10.683,0 -19.344,8.66 -19.344,19.343c0,10.683 8.661,19.343 19.344,19.343c10.684,0 19.342,-8.66 19.342,-19.343" style="fill:#fff;fill-rule:nonzero;"/> 
     <path d="M61.54,304.476c0,-2.967 -2.404,-5.373 -5.371,-5.373c-2.969,0 -5.373,2.406 -5.373,5.373c0,2.967 2.404,5.373 5.373,5.373c2.967,0 5.371,-2.406 5.371,-5.373" style="fill:#878787;fill-opacity:0.199997;fill-rule:nonzero;"/> 

     <animateMotion dur="6s" repeatCount="indefinite"> 
      <mpath xlink:href="#orbit" /> 
     </animateMotion> 
     <animateTransform attributeName="transform" 
         attributeType="XML" 
         type="rotate" 
         from="0 60 70" 
         to="360 60 70" 
         dur="10s" 
         repeatCount="indefinite"/> 
    </g> 
</svg>

источник

2016-03-11 Mykel

Вы смешиваете преобразование CSS с анимацией SMIL атрибута преобразования. Хотя SVG 2 предполагает, что они должны быть одинаковыми, SVG 1.1 имеет разные вещи. До тех пор, пока спецификация SVG 2 и внедрение SVG 2 в УАС не приблизится к завершению, лучше не смешивать эти вещи.

Я преобразовал преобразование элемента g в преобразование атрибута, и анимации, несомненно, как-будто теперь что-то делают для меня сейчас в Firefox.

<svg width="100%" height="100%" viewBox="0 0 570 594" preserveAspectRatio="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="padding: 0 10px 0 18px;fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;"> 
 
    <path id="orbit" d="M146.719,183.637l-18.408,-7.796l-13.233,-6.252l-12.327,-6.302l-18.44,-9.379l-12.42,-11.695l-16.36,-10.421l-15.546,-10.511l-12.326,-12.281l-14.415,-14.728l-8.426,-16.45l-4.168,-14.276l2.084,-14.272l6.297,-11.239l8.019,-10.103l12.013,-6.302l16.682,-8.426l16.356,-4.169l22.804,-4.217l27.474,-4.168l22.03,0l21.75,1.042l24.881,1.042l20.524,1.042l26.875,3.126l27.917,5.211l41.477,9.293l37.047,10.702l41.159,12.782l35.33,14.012l19.808,8.426l25.874,12.554l18.86,11.423l18.578,11.556l18.815,14.105l17.777,16.951l12.233,16.718l8.345,17.187l1.091,27.64l-7.434,8.207l-11.194,10.466l-15.595,10.559l-24.221,7.844l-22.609,5.211l-30.925,3.265l-43.658,0l-32.546,-2.085" style="fill:none;stroke-width:0px;stroke:#ff6060;"/> 
 
    <g id="moon" transform="translate(-53, -130)"> 
 
     <path d="M77.39,295.34c0,-10.683 -8.658,-19.343 -19.342,-19.343c-10.683,0 -19.344,8.66 -19.344,19.343c0,10.683 8.661,19.343 19.344,19.343c10.684,0 19.342,-8.66 19.342,-19.343" style="fill:#fff;fill-rule:nonzero;"/> 
 
     <path d="M61.54,304.476c0,-2.967 -2.404,-5.373 -5.371,-5.373c-2.969,0 -5.373,2.406 -5.373,5.373c0,2.967 2.404,5.373 5.373,5.373c2.967,0 5.371,-2.406 5.371,-5.373" style="fill:#878787;fill-opacity:0.199997;fill-rule:nonzero;"/> 
 

 
     <animateMotion dur="6s" repeatCount="indefinite"> 
 
      <mpath xlink:href="#orbit" /> 
 
     </animateMotion> 
 
     <animateTransform attributeName="transform" 
 
         attributeType="XML" 
 
         type="rotate" 
 
         from="0 60 70" 
 
         to="360 60 70" 
 
         dur="10s" 
 
         repeatCount="indefinite"/> 
 
    </g> 
 
</svg>

источник

2016-03-11 22:34:29

Спасибо за ответ, но я не могу заставить keyTimes и атрибуты значений работать. Являются ли эти устаревшие и заменены на и с? – Mykel

У вашего вопроса нет атрибута keyTimes, задайте другой вопрос, который имеет это, и я попытаюсь посмотреть, что с ним не так. keyTimes и значения не устарели. –

http://stackoverflow.com/questions/35951291/animatetransform-not-working-for-transform-scale – Mykel

-1

Легко!

AnimateTransform тег должен быть в

AnimateMotion тег, полностью закрыт, а не после.

источник

2016-03-11 22:23:24

Работает animateMotion, но animateTransform не работает. Не могли бы вы пояснить свой ответ? (Я не спустил вниз). – Mykel

Этот ответ неверен, animateTransform ** ** в теге '', который он анимирует, и он не должен находиться внутри, поскольку ему может быть присвоен атрибут xlink: href, а затем помещен куда угодно. –

Просто перемещайте после Я опубликую один из моих примеров. –

-2

<!DOCTYPE html> 
<div width="100%"> 
<svg style="background:plum" width="240px" height="120px" 
xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink" > 

<polygon points="60,30 90,90 30,90"> 
    <animateTransform attributeName="transform" 
         attributeType="XML" 
         type="rotate" 
         from="0 60 70" 
         to="360 60 70" 
         dur="10s" 
         repeatCount="indefinite"/> 
</polygon> 
</svg> 
</div>

источник

2016-03-11 22:40:52

-1

прецессиру- Orbit:

<?xml version="1.0"?> 
<svg width="940" height="360" viewBox="0 0 350 350" 
xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink" > 
<!-- Here is a red circle which will be moved along the  motion path. --> 
<g> 
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45   0,1 10,110" 
     stroke="lightgrey" stroke-width="2" 
     fill="none" id="theMotionPath"/ 
    <circle cx="470" cy="180" r="160" fill="paleblue" />  
    <circle cx="10" cy="110" r="3" fill="lightgrey" /> 
    <circle cx="110" cy="10" r="3" fill="lightgrey" /> 
     <circle cx="" cy="" r="10" fill="red">   
    <!-- Define the motion path animation --> 
    <animateMotion dur="6s" repeatCount="indefinite"> 
    <animateTransform attributeName="transform" 
         attributeType="XML" 
         type="rotate" 
         from="0 440 190" 
         to="360 440 190" 
         dur="6s" 
         repeatCount="indefinite"/> 
     <mpath xlink:href="#theMotionPath"/> 
    </animateMotion> 
</circle> 
<animateTransform attributeName="transform" 
         attributeType="XML" 
         type="rotate" 
         from="0 60 70" 
         to="360 60 70" 
         dur="10s" 
         repeatCount="indefinite"/> 

</g>     
</svg>

Копирование, вставка, редактирование по своему вкусу.

источник

2016-03-11 23:48:14

, имеющий animateTransform в animateMotion, недопустим. –

@RobertLongson однако он работает –

animateTransform не работает

ответ

Смежные вопросы