SVG: Не работает анимация, через подключение (<use>)

31.01.2025 03:31:16 pm

Столкнулся и я... Если написать, непосредственно код в HTML документ:

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<!-- Extract -->
	<rect fill='#999999' stroke='#999999' width='30' height='30' x='0' y='0'>
		<animate attributeName='opacity' calcMode='spline' dur='2' values='1;0;1;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='0'></animate>
	</rect>

	<rect fill='#999999' stroke='#999999' width='30' height='30' x='0' y='50'>
		<animate attributeName='opacity' calcMode='spline' dur='2' values='1;0;1;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.2'></animate>
	</rect>

	<rect fill='#999999' stroke='#999999' width='30' height='30' x='0' y='100'>
		<animate attributeName='opacity' calcMode='spline' dur='2' values='1;0;1;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.4'></animate>
	</rect>

	<rect fill='#999999' stroke='#999999' width='30' height='30' x='0' y='150'>
		<animate attributeName='opacity' calcMode='spline' dur='2' values='1;0;1;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.6'></animate>
	</rect>

	<rect fill='#999999' stroke='#999999' width='30' height='30' x='0' y='200'>
		<animate attributeName='opacity' calcMode='spline' dur='2' values='1;0;1;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.8'></animate>
	</rect>
	<!-- End: Extract -->
</svg>

То всё будет работать, анимировать. Если данный код "завернуть" в файл, затем вывести в нужном месте:

Выделить

		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<use xlink:href="<?php echo APP_URL; ?>file/svg/getter.svg#extract"></use>
		</svg>

То будет просто картинка, без анимации.

Жалоба

07.11.2025 10:22:19 am

Ответ на мою проблему:

Проблема, которую вы описываете, связана с особенностями обработки анимаций в SVG-файлах при использовании элемента <use> в браузерах. Когда вы используете ссылку на внешний SVG-файл через элемент <use>, браузер иногда теряет анимацию, так как некоторые анимационные элементы могут обрабатываться некорректно при таком подходе.

Причина проблемы

Когда вы ссылаетесь на внешний SVG-файл через <use>, браузер фактически дублирует содержимое файла, но не всегда способен правильно применить анимации. Это связано с тем, что элемент <use> создаёт shadow DOM, в которой скрипты и анимации могут вести себя иначе, чем в исходном файле.

Решения проблемы

1. Использование встроенной анимации
Лучше всего включить анимацию непосредственно в страницу, как вы сделали изначально. Вместо того чтобы загружать SVG-файл отдельно, разместите его прямо в документе HTML:

Выделить

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Animation Example</title>
</head>
<body>
    <!-- Embed the SVG directly in your HTML document -->
    <svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Your animation code here -->
        <rect fill="#999999" stroke="#999999" width="30" height="30" x="0" y="0">
            <animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"/>
        </rect>
        
        <!-- Add more rectangles with animations as needed -->
    </svg>
</body>
</html>

2. CSS-анимация
Если хочется оставить отдельный файл, можно заменить встроенные SVG-анимации на CSS-анимацию, которая отлично поддерживается браузерами:

Выделить

/* CSS styles for animating */
@keyframes pulse {
    from { opacity: 1; }
    to { opacity: 0; }
}

.rectangle {
    animation-name: pulse;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(.5,0,.5,1); /* spline effect */
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

Затем применяйте стили к прямоугольникам:

Выделить

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css"><![CDATA[
        @import url('styles.css');
    ]]></style>
    
    <rect class="rectangle" fill="#999999" stroke="#999999" width="30" height="30" x="0" y="0"/>
    <!-- More elements can be added similarly -->
</svg>

3. JavaScript-анимация
Можно перенести анимацию на JavaScript, контролируя поведение прямоугольников динамически:

Выделить

// Find all rect elements within the SVG
const rectangles = document.querySelectorAll("rect");

for (let i = 0; i < rectangles.length; i++) {
    const rect = rectangles[i];
    let isVisible = true;
    setInterval(() => {
        if (isVisible) {
            rect.style.opacity = 0;
        } else {
            rect.style.opacity = 1;
        }
        isVisible = !isVisible;
    }, 1000); // Change interval time based on your needs
}

4. XLink & External Files
Если по каким-то причинам встраивание невозможно, попробуйте обернуть каждую группу элементов в отдельные подгруппы и проверить правильность импорта XLink и правильной настройки сервера для MIME-типа .svg файлов.

Итог:
Наиболее надёжным способом остаётся включение SVG-код непосредственно в HTML-документ, так как это гарантирует правильную обработку анимации всеми современными браузерами. Если интеграция внешнего файла обязательна, рекомендуется рассмотреть CSS или JS-анимацию.

Жалоба