SVG smil отказывается вращать группу

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

Поскольку формы осколков Starburst превышают окно просмотра SVG, которое, по сути, маскирует его, мне интересно, отключает ли это переполнение как-то его анимацию?

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

    <svg
  xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg98"
   version="1.1"
   viewBox="0 0 203.20051 203.19937"
   height="768"
   width="768">

  <path
     style="stroke-width:1.03538"
     inkscape:connector-curvature="0"
     id="path2"
     d="m -173.45154,-87.209606 h 508.187 V 219.1202 h -508.187 z"
     fill="#f3b321" />
  <g
     transform="translate(1.6824406,23.526394)"
     id="starburstGroup"
     fill="#facf47">
    <path
       inkscape:connector-curvature="0"
       id="path4"
       d="M 77.726,243.157 H 18.102 L 47.914,52.72 Z M 176.639,212.265 121.723,243.971 47.914,52.72 Z M 351.802,169.996 301.424,257.255 47.914,52.719 Z M 334.954,7.784 v 89.87 L 47.914,52.719 Z M 310.645,-159.258 362.857,-68.825 47.914,52.718 Z m -183.092,5.618 59.254,34.21 L 47.914,52.717 Z M 20.744,-120.837 H 75.083 L 47.913,52.718 Z" />
    <path
       inkscape:connector-curvature="0"
       id="path6"
       d="m -90.807,-119.217 59.18,-34.168 79.54,206.103 z m -124.479,70.361 43.634,-75.575 L 47.913,52.72 Z" />
    <path
       inkscape:connector-curvature="0"
       id="path8"
       d="M -178.514,88.165 V 17.273 L 47.913,52.719 Z m 7.232,141.405 -43.56,-75.448 L 47.914,52.72 Z" />
    <path
       inkscape:connector-curvature="0"
       id="path10"
       d="M -26.02,244.297 -81.03,212.537 47.913,52.72 Z" />
  </g>


    <animate
    id = "starburstRotation"
    xlink:href="#starburstGroup"
    attributeName="transform"
    type="rotate"
    from="0 101.5 101.5"
    to="360 101.5 101.5"
    dur="4s"
    repeatCount="indefinite"
     />
</svg>

svg css-animations smil
person Sam    schedule 08.06.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Наиболее важным изменением является использование animateTransform вместо animate. Кроме того, поскольку группа, которую вы хотите преобразовать, уже имеет атрибут преобразования, я поместил группу в другую группу и вместо этого меняю эту.

body{margin:0;padding:0}
<svg 
   viewBox="0 0 203.20051 203.19937">

  <g id="starburstGroup">
  <g
     transform="translate(1.6824406,23.526394)"  
     fill="#facf47">
      <path
     style="stroke-width:1.03538"
     id="path2"
     d="m -173.45154,-87.209606 h 508.187 V 219.1202 h -508.187 z"
     fill="#f3b321" />
    <path
       
       id="path4"
       d="M 77.726,243.157 H 18.102 L 47.914,52.72 Z M 176.639,212.265 121.723,243.971 47.914,52.72 Z M 351.802,169.996 301.424,257.255 47.914,52.719 Z M 334.954,7.784 v 89.87 L 47.914,52.719 Z M 310.645,-159.258 362.857,-68.825 47.914,52.718 Z m -183.092,5.618 59.254,34.21 L 47.914,52.717 Z M 20.744,-120.837 H 75.083 L 47.913,52.718 Z" />
    <path
       id="path6"
       d="m -90.807,-119.217 59.18,-34.168 79.54,206.103 z m -124.479,70.361 43.634,-75.575 L 47.913,52.72 Z" />
    <path
       id="path8"
       d="M -178.514,88.165 V 17.273 L 47.913,52.719 Z m 7.232,141.405 -43.56,-75.448 L 47.914,52.72 Z" />
    <path
       id="path10"
       d="M -26.02,244.297 -81.03,212.537 47.913,52.72 Z" />
    </g>  
  </g>


    <animateTransform
    id = "starburstRotation"
    xlink:href="#starburstGroup"
    attributeName="transform"
    type="rotate"
    from="0 101.5 101.5"
    to="360 101.5 101.5"
    dur="4s"
    repeatCount="indefinite"
     />

</svg>

person enxaneta    schedule 08.06.2020
comment
БЛЕСТЯЩИЙ! Привет @enxaneta :) - person Sam; 08.06.2020