Как применить одну и ту же анимацию к нескольким объектам SVG

Question

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

В моем примере ниже я поместил цветную анимацию в первый столбец.Конкретный вопрос заключается в том, как я могу применить ту же анимацию к другим столбцам (узлам), не повторяя узлы.Должен ли я использовать JavaScript?Или я могу использовать какую-то ссылку на узлы анимации?

<svg class="columnChart">
    <g transform="matrix(1 0 0 -1 0 0) translate(0, -100)">
        <rect width="10" height="100" x="0" y="0">
            <animate attributeName="fill"
                attributeType="XML"
                begin="mouseover"
                dur="0.25s"
                fill="freeze"
                to="#00ff00"/>
            <animate attributeName="fill"
                attributeType="XML"
                begin="mouseout"
                dur="0.25s"
                fill="freeze"
                to="#000000"/>
        </rect>
        <rect width="10" height="80" x="15" y="0"/>
        <rect width="10" height="55" x="30" y="0"/>
        <rect width="10" height="60" x="45" y="0"/>
    </g>
    <g transform="rotate(90)">
        <text x="110">mo</text>
    </g>
    <g transform="rotate(90)">
        <text x="110" y="-15">tu</text>
    </g>
    <g transform="rotate(90)">
        <text x="110" y="-30">we</text>
    </g>
    <g transform="rotate(90)">
        <text x="110" y="-45">th</text>
    </g>
</svg>

Спасибо за вашу помощь заранее.

Answer 1

Вы можете сделать это с определениями.В моем случае я снова использую анимирующий градиент в качестве заливки.Определите заливку (например, с идентификатором animating_fill) с помощью связанных с ней анимаций, а затем укажите ее как заливку в барах, используя style = "... fill: url (#animating_fill); ..."

Iдумаю, что это, вероятно, лучше, чем решение js (хотя я использую JS для настройки определений в моем случае).

Answer 2

Вы можете использовать CSS3 Transitions .Вот пример , который объединяет SVG-анимацию и CSS-переходы, а непрозрачность анимируется с помощью CSS-переходов, а ширина прямоугольника - с элементами <animate>.

Answer 3

К сожалению, нельзя использовать элементы анимации повторно. Так что да, вы, вероятно, должны использовать Javascript одним из двух способов. Либо вы используете его для дублирования элементов анимации и добавления их внутри каждого элемента, либо вы просто делаете анимацию непосредственно в JS (что может все равно получиться лучше).