SVG <animate> работает в Safari, а не в Chrome
Насколько я понимаю, анимация SMIL поддерживается хромом; однако моя анимация svg SMIL не работает в Chrome (v107), хотя она работает в Safari (v16.0)
Вот ссылка на кодовую ручку, иллюстрирующую проблему. Почему это <animation> не работает в разных браузерах?
<svg width = "46" height = "62" viewBox = "0 0 46 62" fill = "none" xmlns = "http://www.w3.org/2000/svg">
<path d = "M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z" id = "shape" fill = "#007AFF" stroke = "white" stroke-width = "4">
<animate
attributename = "d"
begin = "G.click"
from = "M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z"
to = "M 23 2 C 29.018 2 34.385 4.034 38.179 7.421 C 41.794 10.647 44 15.131 44 20.365 C 44 22.74 43.043 26.026 41.334 29.89 C 39.649 33.7 37.33 37.861 34.818 41.916 C 30.621 48.692 25.957 55.057 22.998 58.816 C 20.041 55.06 15.379 48.7 11.182 41.928 C 8.671 37.873 6.351 33.712 4.666 29.901 C 2.958 26.036 2 22.746 2 20.365 C 2 15.119 4.203 10.637 7.812 7.416 C 11.606 4.029 16.976 2 23 2 Z"
dur = ".4s"
/>
</path>
</svg>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
1
76
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Очевидно, они не обрабатывают значение события для элементов вне пространства имен SVG. Это следует считать ошибкой, и я открыл ОШИБКУ 1395274.
Что касается обходного пути, очевидным является использование JS:
document.querySelector("button").addEventListener("click", (evt) => {
document.querySelector("path animate").beginElement();
});body {
background-color: green;
}
svg {
margin: 0 auto;
}<svg width = "146" height = "62" viewBox = "0 0 146 62" fill = "none" xmlns = "http://www.w3.org/2000/svg">
<path d = "M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z" id = "shape" fill = "#007AFF" stroke = "white" stroke-width = "4">
<animate
attributename = "d"
begin = "indefinite"
from = "M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z"
to = "M 23 2 C 29.018 2 34.385 4.034 38.179 7.421 C 41.794 10.647 44 15.131 44 20.365 C 44 22.74 43.043 26.026 41.334 29.89 C 39.649 33.7 37.33 37.861 34.818 41.916 C 30.621 48.692 25.957 55.057 22.998 58.816 C 20.041 55.06 15.379 48.7 11.182 41.928 C 8.671 37.873 6.351 33.712 4.666 29.901 C 2.958 26.036 2 22.746 2 20.365 C 2 15.119 4.203 10.637 7.812 7.416 C 11.606 4.029 16.976 2 23 2 Z"
dur = "0.4s"
/>
</path>
</svg>
<button>
start animation
</button>Или, если вы действительно не хотите использовать JS, вы можете обойти это, вставив элемент <svg> в свою кнопку... но, вероятно, не делайте этого.
body {
background-color: green;
}
svg {
margin: 0 auto;
}<svg width = "146" height = "62" viewBox = "0 0 146 62" fill = "none" xmlns = "http://www.w3.org/2000/svg">
<path d = "M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z" id = "shape" fill = "#007AFF" stroke = "white" stroke-width = "4">
<animate
attributename = "d"
begin = "G.click"
from = "M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z"
to = "M 23 2 C 29.018 2 34.385 4.034 38.179 7.421 C 41.794 10.647 44 15.131 44 20.365 C 44 22.74 43.043 26.026 41.334 29.89 C 39.649 33.7 37.33 37.861 34.818 41.916 C 30.621 48.692 25.957 55.057 22.998 58.816 C 20.041 55.06 15.379 48.7 11.182 41.928 C 8.671 37.873 6.351 33.712 4.666 29.901 C 2.958 26.036 2 22.746 2 20.365 C 2 15.119 4.203 10.637 7.812 7.416 C 11.606 4.029 16.976 2 23 2 Z"
dur = "0.4s"
/>
</path>
</svg>
<!-- really just to show how Chrome's bug behave don't do that... -->
<button style = "position: relative">
<svg id=G style = "width:100%; height:100%; position:absolute; left:0; top:0;"></svg>
start animation
</button>Ps: обратите внимание, что, как упоминал Роберт в комментариях, вам нужно установить начальный 0 в атрибуте dur, чтобы Firefox его принял.
Ошибка была исправлена в последней версии Canary 110.0.5460.0.
Еще один стильный обходной путь,
это обеспечивает тесную связь между кодом SVG и JS, фиксирующим клик,
— это нативный веб-компонент JavaScript, поддерживаемый всеми современными браузерами.
body {
background-color: green;
}
svg {
margin: 0 auto;
}<svg-marker color = "gold"></svg-marker>
<script>
customElements.define("svg-marker", class extends HTMLElement{
connectedCallback(){
this.innerHTML = `
<svg width = "146" height = "62" viewBox = "0 0 146 62" fill = "none" xmlns = "http://www.w3.org/2000/svg">
<path d = "M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z"
fill = "${this.getAttribute("color") || "#007AFF"}" stroke = "white" stroke-width = "4">
<animate begin = "freeze" fill = "freeze" attributename = "d" dur = "0.4s"
from = "M 23 40 C 26.376 40 28.889 41.717 29.586 42.414 C 31.827 44.655 33 46.675 33 50 C 33 51.479 32.678 52.894 32.096 54.17 C 31.523 55.427 30.696 56.55 29.676 57.467 C 27.932 59.032 25.618 60 22.999 60 C 20.386 60 18.076 59.036 16.334 57.477 C 15.309 56.558 14.479 55.432 13.904 54.17 C 13.322 52.894 13 51.479 13 50 C 13 46.675 14.173 44.655 16.414 42.414 C 17.111 41.717 19.624 40 23 40 Z"
to = "M 23 2 C 29.018 2 34.385 4.034 38.179 7.421 C 41.794 10.647 44 15.131 44 20.365 C 44 22.74 43.043 26.026 41.334 29.89 C 39.649 33.7 37.33 37.861 34.818 41.916 C 30.621 48.692 25.957 55.057 22.998 58.816 C 20.041 55.06 15.379 48.7 11.182 41.928 C 8.671 37.873 6.351 33.712 4.666 29.901 C 2.958 26.036 2 22.746 2 20.365 C 2 15.119 4.203 10.637 7.812 7.416 C 11.606 4.029 16.976 2 23 2 Z"/>
</path>
</svg>`;
this.onclick = (evt) => {
this.querySelector("animate").beginElement();
}
}
});
</script>Другие вопросы по теме
Обнаружение, когда границы вращающегося круга сталкиваются с квадратом
Текст теряет стиль во время анимации героя во Flutter
SwiftUI: затухающий вид
Как увеличить число на другое число с максимальным и минимальным значением
Svelte: не работает встроенная CSS-анимация
Анимации SwiftUI: почему представление контейнера движется? Я изо всех сил пытаюсь понять это поведение
Gltf неправильное вращение
Framer Motion — различные анимации в сопоставленных элементах
JS addClass и fadeIn/fadeOut вместе?
Выбрать случайный цвет из массива, анимировать, повторить, выбрать новый случайный цвет из массива?
Похожие вопросы
Использование `.includes` в атрибутах HTML-элемента?
Как закрыть браузер после отправки формы?
Соскребание данных в «var» внутри <script> с веб-страницы
Извлечение полезной нагрузки одного Common Crawl WARC
Как расположить элемент относительно элемента так же, как кнопка Grammarly в текстовых полях?
HTML img crossorigin="use-credentials" простой пример
Как заменить строку в ветке шаблона?
Как сместить положение мыши, чтобы я мог центрировать абзацы, когда пользователь щелкает?
Виден ли дочерний элемент в родительском
Веб-скрейпинг через Python с использованием Beautiful Soup ничего не возвращает
SVG чувствителен к регистру, если он автономный, поэтому вам понадобится атрибут attributeName, если это так. Также значения dur не могут начинаться с точки/точки, поэтому вам понадобится dur = "0.4s"