SVG - animateMotion не работает с элементом USE в Firefox - PullRequest
Новая
       11

SVG - animateMotion не работает с элементом USE в Firefox

0 голосов
/ 11 мая 2019

Следующий код извлечен из некоторых произведенных шлюзом Tesla Powerwall. Ожидаемое поведение состоит в том, что зеленый круг будет проходить по пути, и это то, что показывает Chrome. Под Firefox (66.0.5 в моем случае) он просто сидит слева от экрана, ничего не делая.

Должно ли это работать под Firefox, и это ошибка в том же самом, есть ли что-то упущенное / неправильное, о чем я могу сказать Тесле в надежде, что они могут исправить это, даже если они говорят, что нет поддержка Firefox?

Спасибо, Сильвия. 

<html>

<body bgcolor="#000000">
    <svg width="250" height="100" viewBox="0 0 250 100">
        <defs>
            <g id="curvedArrow" stroke-width="1">
                <path id="curvedPath" d="M 125 75  l 0 -45  a 5,5 0 0 1 5,-5  L 250 25" fill="none"></path>
                <circle cx="0" cy="0" r="7" fill-opacity="0.5" stroke-opacity="0">
                    <animateMotion dur="1000ms" repeatCount="indefinite">
                        <mpath xlink:href="#curvedPath"></mpath>
                    </animateMotion>
                </circle>
                <circle cx="0" cy="0" r="1.5" stroke-opacity="0">
                    <animateMotion dur="1000ms" repeatCount="indefinite">
                        <mpath xlink:href="#curvedPath"></mpath>
                    </animateMotion>
                </circle>
            </g>
        </defs>
        <use id="battery-to-home" xlink:href="#curvedArrow" fill="#00D000" x="3" y="28"></use>
    </svg>
</body>

</html>

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Это ошибка от Firefox, код в порядке.
Я открыл здесь проблема , обратите внимание, что это регрессия, поэтому, надеюсь, она будет исправлена ​​быстро.

Суть проблемы заключается в том, что Firefox совсем недавно изменил поведение элемента , чтобы они устанавливали свой клонированный контент в Shadow-DOM , как сейчас просят спецификации.Кажется, что они что-то сломали при этом.

Пока, если вам когда-нибудь понадобится обходной путь, ну ... не используйте ...

Исправлено в сегодняшней ночной 68.

0 голосов
/ 11 мая 2019

Firefox поддерживает (по крайней мере, в этом примере) анимацию с помощью элементов animate в используемых элементах, но не в элементе animateMotion. Вам нужно настроить массив значений, чтобы приблизиться к поведению дуги в контуре, но это возможно.

Так что-то вроде этого работает в FF. 

    <svg width="250" height="100" viewBox="0 0 250 100">
        <defs>
            <g id="curvedArrow" stroke-width="1">
                <path id="curvedPath" d="M 125 75  l 0 -45  a 5,5 0 0 1 5,-5  L 250 25" fill="none"></path>
                <circle cx="0" cy="0" r="7" fill-opacity="0.5" stroke-opacity="0">
                 <animate attributeName="cx" values="125; 125; 250" dur="3s" fill="freeze"/>
                  <animate attributeName="cy" values="75; 30; 30" dur="3s" fill="freeze"/>
                </circle>
              
                <circle cx="0" cy="0" r="1.5" stroke-opacity="0">
                 <animate attributeName="cx" values="125; 125; 250" dur="3s"/>
                  <animate attributeName="cy" values="75; 30; 30" dur="3s"/>
                </circle>
            </g>
        </defs>
        <use id="battery-to-home" xlink:href="#curvedArrow" fill="#00D000" x="3" y="28"></use>
    </svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...