לאתר זה תהיה פונקציונליות מוגבלת בזמן שאנו מתחזקים אותו לשיפור החוויה שלך. אם מאמר מסויים לא פותר את הבעיה שלך וברצונך לשאול שאלה, קהילת התמיכה שלנו מחכה לעזור לך ב־Twitter תחת ‎@FirefoxSupport וב־Reddit תחת ‎/r/firefox.

יש להימנע מהונאות תמיכה. לעולם לא נבקש ממך להתקשר או לשלוח הודעת טקסט למספר טלפון או לשתף מידע אישי. נא לדווח על כל פעילות חשודה באמצעות באפשרות ״דיווח על שימוש לרעה״.

מידע נוסף

Animated SVG not working

  • 9 תגובות
  • 1 has this problem
  • 71 views
  • תגובה אחרונה מאת 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>");
Read this answer in context 👍 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 :)