Не работает анимация градиента в svg в Safari. В чем ошибка в коде?
В Хроме и FF всё работает как надо, в Сафари не хочет работать анимация градиента. Исходник прилагаю
Ссылка на сам сайт: https://del1t.me
<svg class="cog" width="350" height="350" viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g clip-path="url(#clip0_102_1064)"> <mask id="mask0_102_1064" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="18" width="314" height="314"> <path d="M275.146 53.2072C286.175 56.1547 294.785 64.7646 297.732 75.7936L331.004 200.289C333.951 211.318 330.789 223.09 322.707 231.172L231.484 322.396C223.402 330.477 211.629 333.64 200.6 330.692L76.1052 297.421C65.0762 294.473 56.4663 285.863 53.5188 274.834L20.2473 150.339C17.2998 139.31 20.4624 127.538 28.5439 119.456L119.768 28.2323C127.849 20.1508 139.622 16.9881 150.651 19.9357L275.146 53.2072Z" fill="black"/> </mask> <g mask="url(#mask0_102_1064)"> <rect x="19" y="19" width="313" height="313" fill="url(#pattern0)"/> <mask id="mask1_102_1064" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="18" width="314" height="314"> <path d="M273.21 60.4529C281.647 62.7077 288.232 69.293 290.487 77.73L323.758 202.225C326.013 210.664 323.595 219.678 317.404 225.869L226.18 317.092C219.99 323.283 210.975 325.702 202.537 323.447L78.0416 290.175C69.6047 287.92 63.0193 281.335 60.7645 272.898L27.493 148.403C25.2378 139.964 27.6565 130.95 33.8472 124.759L125.071 33.5356C131.262 27.3449 140.276 24.9262 148.714 27.1814L273.21 60.4529Z" stroke="white" stroke-width="15"/> </mask> <g mask="url(#mask1_102_1064)"> <rect width="350" height="350" fill="url(#paint0_linear_102_1064)"/> </g> </g> </g> <defs> <use xlink:href="#image0_102_1064" transform="scale(0.00123916)"/> </pattern> <linearGradient id="paint0_linear_102_1064" x1="115.278" y1="1.57324" x2="243.194" y2="345.563" gradientUnits="userSpaceOnUse"> <stop stop-color="#31BED6"/> <stop offset="0.432292" stop-color="#5775FF"/> <stop offset="0.697917" stop-color="#9834FF"/> <stop offset="1" stop-color="#B533E4"/> <animateTransform attributeName="gradientTransform" type="rotate" from="0 19 19" to="360 359 359" dur="5s" repeatCount="indefinite"/> </linearGradient> <clipPath id="clip0_102_1064"> <rect width="350" height="350" fill="white"/> </clipPath> <image id="image0_102_1064" width="807" height="807"/> </defs> </svg> |
<svg class="cog" width="350" height="350" viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g clip-path="url(#clip0_102_1064)"> <mask id="mask0_102_1064" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="18" width="314" height="314"> <path d="M275.146 53.2072C286.175 56.1547 294.785 64.7646 297.732 75.7936L331.004 200.289C333.951 211.318 330.789 223.09 322.707 231.172L231.484 322.396C223.402 330.477 211.629 333.64 200.6 330.692L76.1052 297.421C65.0762 294.473 56.4663 285.863 53.5188 274.834L20.2473 150.339C17.2998 139.31 20.4624 127.538 28.5439 119.456L119.768 28.2323C127.849 20.1508 139.622 16.9881 150.651 19.9357L275.146 53.2072Z" fill="black"/> </mask> <g mask="url(#mask0_102_1064)"> <rect x="19" y="19" width="313" height="313" fill="url(#pattern0)"/> <mask id="mask1_102_1064" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="18" width="314" height="314"> <path d="M273.21 60.4529C281.647 62.7077 288.232 69.293 290.487 77.73L323.758 202.225C326.013 210.664 323.595 219.678 317.404 225.869L226.18 317.092C219.99 323.283 210.975 325.702 202.537 323.447L78.0416 290.175C69.6047 287.92 63.0193 281.335 60.7645 272.898L27.493 148.403C25.2378 139.964 27.6565 130.95 33.8472 124.759L125.071 33.5356C131.262 27.3449 140.276 24.9262 148.714 27.1814L273.21 60.4529Z" stroke="white" stroke-width="15"/> </mask> <g mask="url(#mask1_102_1064)"> <rect width="350" height="350" fill="url(#paint0_linear_102_1064)"/> </g> </g> </g> <defs> <use xlink:href="#image0_102_1064" transform="scale(0.00123916)"/> </pattern> <linearGradient id="paint0_linear_102_1064" x1="115.278" y1="1.57324" x2="243.194" y2="345.563" gradientUnits="userSpaceOnUse"> <stop stop-color="#31BED6"/> <stop offset="0.432292" stop-color="#5775FF"/> <stop offset="0.697917" stop-color="#9834FF"/> <stop offset="1" stop-color="#B533E4"/> <animateTransform attributeName="gradientTransform" type="rotate" from="0 19 19" to="360 359 359" dur="5s" repeatCount="indefinite"/> </linearGradient> <clipPath id="clip0_102_1064"> <rect width="350" height="350" fill="white"/> </clipPath> <image id="image0_102_1064" width="807" height="807"/> </defs> </svg>
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разобраться, почему анимация градиента в SVG не работает в Safari, нужно учитывать особенности этого браузера. В Safari есть несколько известных проблем, связанных с анимацией градиентов в SVG. Одна из них может быть связана с использованием CSS свойства `gradientTransform` вместо `gradientTransform="rotate()"` внутри ``.
Вот пример кода, который может вызывать проблемы в Safari:
Чтобы исправить эту проблему, попробуйте использовать атрибут `gradientTransform="rotate()"` вместо CSS свойства `gradientTransform`. Вот исправленный пример кода:
Если после внесения этих изменений проблема все еще остается, то возможно проблема кроется в другом месте кода. Попробуйте также проверить поддерживаемость анимации градиентов в SVG для конкретной версии Safari, возможно, что в вашей версии браузера эта функциональность не поддерживается.