LinearGradiant SVG Animation выглядит некорректно в Firefox
Я работаю со следующей анимацией SVG, которая заполняет дом снизу вверх. Он отлично работает в Chrome, Safari и Internet Explorer, но не работает в Firefox. Если вы откроете сниппет в Firefox, то увидите, что он работает некорректно.
.house-container {
height: 200px;
width: 200px
}<div class = "house-container">
<svg viewBox = "0 0 30 30" version = "1.1" preserveAspectRatio = "none">
<g
id = "Dashboard"
stroke = "none"
stroke-width = "1"
fill = "none"
fillRule = "evenodd"
>
<linearGradient id = "house-1" x2 = "1" y2 = "4">
<stop offset = "0%" stop-color = "#ddd" />
<stop offset = "0%" stop-color = "#ddd">
<animate
id = "house-1"
attributeName = "offset"
to = "100%"
dur = "0.5s"
begin = "0s"
fill = "freeze"
/>
</stop>
<stop offset = "100%" stop-color = "#10004c">
<animate
id = "house-1"
attributeName = "offset"
to = "100%"
dur = "0.5s"
begin = "0s"
fill = "freeze"
/>
</stop>
</linearGradient>
<g
transform = "translate(-1161.000000, -558.000000)"
fill = "url(#house-1)"
>
<g transform = "translate(437.000000, 475.000000)">
<g id = "houses" transform = "translate(340.000000, 83.000000)">
<g id = "house" transform = "translate(384.000000, 0.000000)">
<polygon
id = "Path"
points = "21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>Gif того, как это выглядит в Firefox:
Я читал, что у Firefox есть проблемы с SVG, но все мои попытки решить проблему с анимацией были напрасными. Есть ли что-то очевидное, например, свойство, которое мне не хватает?
Я хочу, чтобы анимация выглядела точно так же, как в Firefox, как в Chrome. В Firefox это ведет себя немного странно.
Он идет вверх не по горизонтали (если вы его замедлите, вы это увидите). Этот странный угол - именно то, что вам нужно, не так ли?
В идеале он должен заполняться снизу вверх, но в Firefox этого даже не происходит. Я обновлю пост гифкой. Проблема больше в том, что это не похоже на то, что он вообще играет в Firefox, но он выглядит нормально во всех других браузерах.
начиная с серого и заканчивая фиолетовым или наоборот?
Он должен иметь фиолетовый цвет, в Firefox - серый.
Обратите внимание, что, учитывая вашу разметку, я считаю, что отрисовка Firefox верна.
Ответы 1
Что-то вроде этого?
Я удалил повторяющиеся идентификаторы, исправил значения x1, y1, x2 и y2 и поменял местами цвета (я мог бы поменять местами анимацию, чтобы вместо этого она перешла к 0%).
.house-container {
height: 200px;
width: 200px
}<div class = "house-container">
<svg viewBox = "0 0 30 30" version = "1.1" preserveAspectRatio = "none">
<g
id = "Dashboard"
stroke = "none"
stroke-width = "1"
fill = "none"
fillRule = "evenodd"
>
<linearGradient id = "house-1" x2 = "0" y1 = "0" y2 = "1">
<stop offset = "0%" stop-color = "#ddd" />
<stop offset = "100%" stop-color = "#ddd">
<animate
attributeName = "offset"
to = "0%"
dur = "0.5s"
begin = "0s"
fill = "freeze"
/>
</stop>
<stop offset = "100%" stop-color = "#10004c">
<animate
attributeName = "offset"
to = "0%"
dur = "0.5s"
begin = "0s"
fill = "freeze"
/>
</stop>
</linearGradient>
<g
transform = "translate(-1161.000000, -558.000000)"
fill = "url(#house-1)"
>
<g transform = "translate(437.000000, 475.000000)">
<g id = "houses" transform = "translate(340.000000, 83.000000)">
<g id = "house" transform = "translate(384.000000, 0.000000)">
<polygon
id = "Path"
points = "21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>Сейчас это работает в Firefox, но больше не работает в Chrome :(
@JamesIves, а теперь я попробовал эту альтернативу в Safari, поэтому, по-видимому, Chrome тоже будет работать. Ошибка Chrome / Safari в моей предыдущей версии - это ошибка в их реализации.
а) у вас есть несколько элементов с одинаковым значением идентификатора (недействительным) б) чего вы пытаетесь достичь с помощью x2 = "1" y2 = "4". Это очень странные значения, как вы хотите, чтобы анимация выглядела?