d-interpolation-within-document-referenced-via-background-image.html (671B)
1 <!DOCTYPE html> 2 <title>Test the d property animates within a document loaded via "background-image: url()"</title> 3 <meta charset=utf-8> 4 <style> 5 6 div { 7 display: inline-block; 8 width: 96px; 9 height: 96px; 10 background-repeat: no-repeat; 11 background-size: 100% 100%; 12 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cstyle%3E path { fill: none; stroke-width: 2; stroke: black; animation: path 1s linear forwards paused; } @keyframes path { 0%25 { d: path('M2 2l20 0'); } 100%25 { stroke: green; d: path('M2 2l20 0'); } } %3C/style%3E%3Cpath d='M2 2l2 0' /%3E%3C/svg%3E"); 13 } 14 15 </style> 16 <div></div>