Ich habe gerade generiert eine SVG-basierte Ladeanzeige mit einem Online-Service, aber jedes Mal eine Seite lädt, die es verwendet, bekomme ich eine Warnung von Chrome, die mich informiert, dass SMIL-Animationen werden veraltet, was eher anstößig ist. In einem Versuch, es loszuwerden, entschied ich mich zu prüfen, die <animate> Tags mit Web-Animationen zu ersetzen. Unten ist der Original SVG:Web-Animation in SVG bricht, wenn als Hintergrundbild
<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt">
<circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
</circle>
</svg>Und hier ist das, was ich am Ende mit:
<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round" id="line"/>
<script type="text/javascript" xlink:href="https://cdn.rawgit.com/web-animations/web-animations-js/45d8e40300e82ff02ccfbbc78c89500de0f5616f/web-animations.min.js"></script>
<script type="text/javascript"><![CDATA[
var line = document.getElementById("line");
line.animate(
[
{strokeDashoffset:0},
{strokeDashoffset:502}
],
{ duration: 2000, iterations: Infinity }
);
line.animate(
[
{strokeDasharray:"150.6 100.4"},
{strokeDasharray:"1 250"},
{strokeDasharray:"150.6 100.4"}
],
{ duration: 2000, iterations: Infinity }
);
]]></script>
</svg>Ich wollte wirklich aufgeregt sein, dass ich schaffte es zu arbeiten, dann erstarrte mein Lächeln auf meinem Gesicht, sobald ich das genau bemerkte dasselbe SVG, wenn es in CSS als background-image verwendet wird, weigert sich überhaupt zu animieren (Demo unten; Beachten Sie, dass ich hier das SVG mit einem Daten-URI inline eingezeichnet habe, aber das gleiche passiert, wenn das SVG mit einer normalen URL geladen wird.
body:before {
content: '';
display: block;
width: 200px;
height: 200px;
background: url('data:image/svg+xml;utf8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round" id="line"/><script type="text/javascript" xlink:href="https://cdn.rawgit.com/web-animations/web-animations-js/45d8e40300e82ff02ccfbbc78c89500de0f5616f/web-animations.min.js"></script><script type="text/javascript"><![CDATA[var line = document.getElementById("line");line.animate([{strokeDashoffset:0},{strokeDashoffset:502}],{ duration: 2000, iterations: Infinity });line.animate([{strokeDasharray:"150.6 100.4"},{strokeDasharray:"1 250"},{strokeDasharray:"150.6 100.4"}],{ duration: 2000, iterations: Infinity });]]></script></svg>') no-repeat center center;
background-size: contain;
}Soll ich einfach ignorieren die Warnung und bleiben mit SMIL oder ist es eine Möglichkeit, Web-Animationen arbeiten innerhalb SVGs zu machen?
Skript läuft nicht im Hintergrund Bilder so nicht, es gibt keine Möglichkeit, diese Arbeit zu machen. –