Этот сайт имеет ограниченную функциональность, пока мы проводим техническое обслуживание для улучшения его работы. Если какая-либо статья не решила вашу проблему и вы хотите задать вопрос, наше сообщество поддержки ждёт вас: @FirefoxSupport в Твиттере и /r/firefox на Reddit.

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Подробнее

Animated SVG not working

  • 9 ответов
  • 1 имеет эту проблему
  • 71 просмотр
  • Последний ответ от waffs

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)

Did you take a screen of the error in FF?

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.

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.

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

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

Выбранное решение

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

Awesome that worked thank you :)