#jquery #svg #css-animations #fill #stroke
#jquery #svg #css-анимации #заливка #обводка
Вопрос:
Я пытаюсь отредактировать заливку и обводку svg. Обычно это просто. Однако в этом svg используется анимация ключевых кадров css для анимации свойства stroke.
По какой-то причине это не позволяет этому работать:
$("#logo").css({
"background-color": "yellow",
"fill": "red",
"stroke": "red"
});
Цвет фона меняется, и похоже, что цвет заливки / обводки тоже меняется, но он находится под цветами анимации css (вы можете слегка видеть красный контур по краям контура, особенно когда svg все еще серый).
Это, вероятно, сложно понять, поэтому я собрал скрипку: https://jsfiddle.net/odk5dq4e /
Комментарии:
1. Ваша скрипка не имеет анимации, потому что на CSS нет ссылок. Анимация CSS (если бы она выполнялась) перезаписала бы изменение стиля, потому что это одна из функций анимации, а заливка фигуры предположительно скрыта обводкой. Красный контур, вероятно, является артефактом сглаживания между желтым фоном и серой обводкой.
2. @RobertLongson Я не уверен, что понимаю первый пункт, css ограничен и встроен, на что нет ссылок? Кроме того, анимация css выполняется для меня?
3. Нет ничего, что указывало бы на make-me-a-hanzi-animation-X для любого X