Closed DrNiels closed 4 years ago
I tried 2 basic examples, without the use of Polymer library.
Firstly, I tried only having the svg itself
<html>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="-40.7968" y="10" width="100" height="100">
<animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"></animate>
</rect>
</svg>
</html>
Results: Works as expected.
Next, I tried appending the svg into a <p>'s shadowroot.
<html>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="-40.7968" y="10" width="100" height="100">
<animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"></animate>
</rect>
</svg>
<p></p>
<script>
let p = document.querySelector("p")
let shadow = p.attachShadow({mode: 'open'});
shadow.appendChild(document.querySelector("svg"))
</script>
</html>
Results: Does not work on firefox. Works fine in chrome.
I'm inclined to believe that the issue lies with firefox itself.
Possible workaround: Use css animation instead.
<style>
@keyframes slidein {
from {
x: -100px;
}
to {
x: 120px;
}
}
svg>rect {
animation-duration: 10s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
</style>
Put this in together in the shadowroot. You can do so by inserting this into static get template() {
.
As an alternative to using svg>rect
, you may assign a class attribute to the rect and use it instead.
Thank you for your feedback! I went ahead and reported the issue for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1601666
Description
I want to use an animated SVG in my app. This is working great in Chrome, but unfortunately not in Firefox. The animation does not occur and the SVG freezes at its initial configuration. Without Polymer, animations work fine, even in Shadow DOMs.
Live Demo
The following element shows the erroneous behavior: import '@polymer/polymer/polymer-legacy.js'; import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
Steps to Reproduce
Expected Results
I'd expect to see the animation in Firefox.
Actual Results
No animation occurs in Firefox
Browsers Affected
Versions