JetBrains / svg-sprite-loader

Webpack loader for creating SVG sprites.
MIT License
2.01k stars 272 forks source link

SVG "animate" not working in chrome #442

Closed maxstolze closed 3 years ago

maxstolze commented 3 years ago

Bug

What is the current behavior? Loading a svg with including <circle ...><animate ../></circle> tag is not working in Chrome ( 88.0.4324.190), but working in Firefox (86.0). OS animation is activated.

What is the expected behavior? Animation should be shown.

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.

SVG:

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis">
    <circle cx="84" cy="50" r="0" fill="var(--local-secondary)">
        <animate attributeName="r" values="10;0;0;0;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="3s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="84;84;84;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="3s" repeatCount="indefinite" begin="0s"></animate>
    </circle>...
</svg>

webpack.config

... {
          test: /\.svg$/,
          include: [path.resolve(__dirname, "images", "won-icons")],
          use: [
            {
              loader: "svg-sprite-loader",
              options: {
                extract: true,
                spriteFilename: "spritesheet.[contenthash].svg",
              },
            },
          ],
        }, ...

Please tell us about your environment:

d3x42 commented 3 years ago

It's not related to the SVG loader itself. Please consider asking a question about chrome specific SVG behaviour on StackOverflow.