Как я оживляю группу SVG, скорее благодарю только за анимацию по одному? - PullRequest
Новая
       40

Как я оживляю группу SVG, скорее благодарю только за анимацию по одному?

0 голосов
/ 12 февраля 2019

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

<g id="buildings">
  <rect fill="#aad4ff" height="22"  width="90" x="223.5" y="376.5"><animate attributeType="XML" attributeName="y" from="376.5" to="373" begin="mouseover" end="mouseout" dur="500ms"/></rect>
  <rect fill="#aad4ff" height="117"  width="113" x="110.5" y="281.5"><animate attributeType="XML" at

  </g>

, как вы можете видеть, что у меня есть для каждого SVG, это усложняет, если мой SVG является чертежомптица, состоящая из множества разных svgs

мой вопрос: как я могу использовать animate при обращении к группе svgs? 

<g id="something">
    <ellipse cx="46.78408" cy="425.59942" fill="#ff5656"  rx="15" ry="16"/>
     <ellipse cx="50" cy="437" fill="#ff5656" rx="25" ry="10"/>
<animate attributeType="XML" attributeName="cx" from="47" to="646" repeatCount="indefinite" dur="10s"/>

я хочуиспользовать одну анимированную строку для всех элементов svg внутри группы, и этот способ написания не работает.благодарю вас!PS это для проекта, и я не могу использовать CSS, если это можно сделать в HTML, который будет лучше.

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете анимировать только атрибуты группы.Вы не даете подробностей о том, что именно хотите делать, но давайте предположим, что вы хотите перемещать птицу по экрану слева направо, в то время как крылья птицы движутся относительно ее тела.

Это означает, что вы должны определить движение крыла для каждого отдельного крыла, но движение по экрану может быть определено как анимация атрибута transform группы.Для этого есть даже специальный элемент: 

<g id="something">
    <animateTransform attributeType="XML" attributeName="transform" type="translate"
        from="0" to="600" repeatCount="indefinite" dur="10s"/>
    <ellipse cx="46.78408" cy="425.59942" fill="#ff5656"  rx="15" ry="16"/>
    <ellipse cx="50" cy="437" fill="#ff5656" rx="25" ry="10"/>
</g>

Синтаксис <animateTransform> является сокращенной формой для перехода от атрибута transform="translate(0)" к transform="translate(600)". Функция translate() имеет фактически два параметра, относительное движение x и y. Например, transform="translate(600 100)" будет означать «перейти на 600 вправо и на 100 вниз». В элементе анимации должны быть перечислены только цифры, например: 

    <animateTransform attributeType="XML" attributeName="transform" type="translate"
        from="0 0" to="600 100" repeatCount="indefinite" dur="10s"/>

Анимация интерполируется по обоим числам одновременно, что приводит к диагональному перемещению по прямой линии от начала к конечной точке.

...