搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

Animated SVG not working

  • 9 回覆
  • 1 有這個問題
  • 111 次檢視
  • 最近回覆由 waffs

more options

Animated SVG not working:

https://codepen.io/Wpitallo/pen/dmOvjO

Works in chrome

Animated SVG not working: https://codepen.io/Wpitallo/pen/dmOvjO Works in chrome

被選擇的解決方法

I tried the image with base64 encoding and that works for me, so this might be an issue with "#" symbols in the code that are known to cause issues with data URIs.

background: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MDAnIGhlaWdodD0nNDAwJyB2aWV3Qm94PScwIDAgNDQgNDQnIHN0cm9rZT0nI2ZmZic+PGcgZmlsbD0nbm9uZScgZmlsbC1ydWxlPSdldmVub2RkJyBzdHJva2Utd2lkdGg9JzEnPiA8Y2lyY2xlIGN4PScyMicgY3k9JzIyJyByPScxNy45MzMxJz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdyJyBiZWdpbj0nMHMnIGR1cj0nMS44cycgdmFsdWVzPScxOyAyMCcgY2FsY01vZGU9J3NwbGluZScga2V5VGltZXM9JzA7IDEnIGtleVNwbGluZXM9JzAuMTY1LCAwLjg0LCAwLjQ0LCAxJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J3N0cm9rZS1vcGFjaXR5JyBiZWdpbj0nMHMnIGR1cj0nMS44cycgdmFsdWVzPScxOyAwJyBjYWxjTW9kZT0nc3BsaW5lJyBrZXlUaW1lcz0nMDsgMScga2V5U3BsaW5lcz0nMC4zLCAwLjYxLCAwLjM1NSwgMScgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L2NpcmNsZT4gPGNpcmNsZSBjeD0nMjInIGN5PScyMicgcj0nMTkuOTkzNCc+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ncicgYmVnaW49Jy0wLjlzJyBkdXI9JzEuOHMnIHZhbHVlcz0nMTsgMjAnIGNhbGNNb2RlPSdzcGxpbmUnIGtleVRpbWVzPScwOyAxJyBrZXlTcGxpbmVzPScwLjE2NSwgMC44NCwgMC40NCwgMScgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdzdHJva2Utb3BhY2l0eScgYmVnaW49Jy0wLjlzJyBkdXI9JzEuOHMnIHZhbHVlcz0nMTsgMCcgY2FsY01vZGU9J3NwbGluZScga2V5VGltZXM9JzA7IDEnIGtleVNwbGluZXM9JzAuMywgMC42MSwgMC4zNTUsIDEnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+IDwvY2lyY2xlPjwvZz48L3N2Zz4=");

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 44 44' stroke='%23fff'><g fill='none' fill-rule='evenodd' stroke-width='1'> <circle cx='22' cy='22' r='17.9331'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle> <circle cx='22' cy='22' r='19.9934'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/> </circle></g></svg>");
從原來的回覆中察看解決方案 👍 1

所有回覆 (9)

more options

Did you take a screen of the error in FF?

more options
more options
more options

I am showing you as there are no errors.

That error is a codepen issue, there are no other validation issues with the error that I am showing you.

more options

get rid of this color="#111" it will work fine, you can define color there

Please let us know if this solved your issue or if need further assistance.

more options

Sorry, ignore that error, that is an error with codepen. That has nothing to do with the error that I am illustrating.

If you open this link in chrome you will see an animated svg, in firefox nothing:

https://codepen.io/Wpitallo/debug/dmOvjO
more options

it has nothing to do with color="#111"

more options

選擇的解決方法

I tried the image with base64 encoding and that works for me, so this might be an issue with "#" symbols in the code that are known to cause issues with data URIs.

background: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MDAnIGhlaWdodD0nNDAwJyB2aWV3Qm94PScwIDAgNDQgNDQnIHN0cm9rZT0nI2ZmZic+PGcgZmlsbD0nbm9uZScgZmlsbC1ydWxlPSdldmVub2RkJyBzdHJva2Utd2lkdGg9JzEnPiA8Y2lyY2xlIGN4PScyMicgY3k9JzIyJyByPScxNy45MzMxJz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdyJyBiZWdpbj0nMHMnIGR1cj0nMS44cycgdmFsdWVzPScxOyAyMCcgY2FsY01vZGU9J3NwbGluZScga2V5VGltZXM9JzA7IDEnIGtleVNwbGluZXM9JzAuMTY1LCAwLjg0LCAwLjQ0LCAxJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J3N0cm9rZS1vcGFjaXR5JyBiZWdpbj0nMHMnIGR1cj0nMS44cycgdmFsdWVzPScxOyAwJyBjYWxjTW9kZT0nc3BsaW5lJyBrZXlUaW1lcz0nMDsgMScga2V5U3BsaW5lcz0nMC4zLCAwLjYxLCAwLjM1NSwgMScgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L2NpcmNsZT4gPGNpcmNsZSBjeD0nMjInIGN5PScyMicgcj0nMTkuOTkzNCc+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ncicgYmVnaW49Jy0wLjlzJyBkdXI9JzEuOHMnIHZhbHVlcz0nMTsgMjAnIGNhbGNNb2RlPSdzcGxpbmUnIGtleVRpbWVzPScwOyAxJyBrZXlTcGxpbmVzPScwLjE2NSwgMC44NCwgMC40NCwgMScgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdzdHJva2Utb3BhY2l0eScgYmVnaW49Jy0wLjlzJyBkdXI9JzEuOHMnIHZhbHVlcz0nMTsgMCcgY2FsY01vZGU9J3NwbGluZScga2V5VGltZXM9JzA7IDEnIGtleVNwbGluZXM9JzAuMywgMC42MSwgMC4zNTUsIDEnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+IDwvY2lyY2xlPjwvZz48L3N2Zz4=");

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 44 44' stroke='%23fff'><g fill='none' fill-rule='evenodd' stroke-width='1'> <circle cx='22' cy='22' r='17.9331'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle> <circle cx='22' cy='22' r='19.9934'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/> </circle></g></svg>");

由 cor-el 於 修改

more options

Awesome that worked thank you :)