Apologies if this is has been covered already, I looked through the search results for 'SVG' and suspect it might be related to one of the security fixes.
A SVG with CSS incorporated will animate in a webpage as an externally linked image or a data URI in Firefox V59.0.1 (64-bit) and Iridium 2017.11 (64-bit), but will not do so in Pale Moon V27.8.2 (64-bit, desktop). If the SVG file is opened directly in Pale Moon then it will animate. Pale Moon was opened in safe mode in case it was related to an add-on, and the same was observed in a fresh copy of Pale Moon Portable V27.8.2 (64-bit).
(Dell Latitude 13 7350 running Win8.1 Pro, also seen with the same version of Pale Moon on a generic desktop running Win7 SP1.)
svgcsstest.svg
Code: Select all
<svg viewBox="0 0 198 164" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"><style type="text/css"><![CDATA[.knot { stroke-dasharray: 250; stroke-dashoffset: 0; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation: d 4s infinite alternate; } @keyframes d { to { stroke-dashoffset: 250; } }]]></style><path class="knot" d="M107.699 126.515c12.338-12.338 17.74-10.639 21.162-27.748l4.706-23.534c3.138-15.69-8.313-38.434-34.353-68.233-26.04 29.8-37.491 52.544-34.353 68.233m4.706 23.534c3.422 17.11 8.824 15.41 21.162 27.748l16.97 16.97c11.314 11.314 39.223 13.519 83.729 6.614-16.609-37.36-32.758-57.608-48.447-60.746m-23.534-4.706c-19.84-3.968-20.626-3.968-40.466 0l-23.534 4.706C39.758 92.491 23.609 112.74 7 150.1c44.506 6.905 72.415 4.7 83.729-6.614" stroke-width="14" stroke-linecap="butt" fill="none" stroke="#000" fill-rule="evenodd" stroke-linejoin="bevel"/></svg>
Code: Select all
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>SVG Internal CSS Test</title> </head>
<body>
<img width="480px" src="data:image/svg+xml,%3csvg viewBox='0 0 198 164' xmlns='http://www.w3.org/2000/svg' version='1.2' baseProfile='tiny'%3e%3cstyle type='text/css'%3e%3c!%5bCDATA%5b.knot %7b stroke-dasharray: 250%3b stroke-dashoffset: 0%3b transition-timing-function: cubic-bezier(0.42%2c 0%2c 0.58%2c 1)%3b animation: d 4s infinite alternate%3b %7d %40keyframes d %7b to %7b stroke-dashoffset: 250%3b %7d %7d%5d%5d%3e%3c/style%3e%3cpath class='knot' d='M107.699 126.515c12.338-12.338 17.74-10.639 21.162-27.748l4.706-23.534c3.138-15.69-8.313-38.434-34.353-68.233-26.04 29.8-37.491 52.544-34.353 68.233m4.706 23.534c3.422 17.11 8.824 15.41 21.162 27.748l16.97 16.97c11.314 11.314 39.223 13.519 83.729 6.614-16.609-37.36-32.758-57.608-48.447-60.746m-23.534-4.706c-19.84-3.968-20.626-3.968-40.466 0l-23.534 4.706C39.758 92.491 23.609 112.74 7 150.1c44.506 6.905 72.415 4.7 83.729-6.614' stroke-width='14' stroke-linecap='butt' fill='none' stroke='black' fill-rule='evenodd' stroke-linejoin='bevel'/%3e%3c/svg%3e">
<img width="480px" src="svgcsstest.svg">
</body>
</html>