URL-编码的 SVG 作为 Edge 中的背景
URL-encoded SVGs as background in Edge
我创建了以下笔来演示我的问题：
http://codepen.io/anon/pen/mewVGB
我尝试将 URL 编码的 SVG 图像作为背景图像，如下所示：
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20512%22%20enable-background%3D%22new%200%200%20500%20512%22%3E%3Cpath%20d%3D%22M258.9%20512c-11.3%200-24.6-2.9-40.5-10.7-10.7-5.2-44.8-22.9-69.7-35.8l-21-10.9c-15.7-8.1-20.2-7.1-32.5.7l-26.9%2017.6c-4.6%203-10.8%201.7-13.8-2.9s-1.7-10.8%202.9-13.8l27-17.6c16.9-10.8%2029.1-13.8%2052.5-1.7l21%2010.9c24.8%2012.9%2058.7%2030.5%2069.2%2035.6%2033.4%2016.3%2048.7%206.6%2066.4-4.5%202.8-1.8%205.7-3.6%208.5-5.2%2017.6-10.2%20146.8-96.1%20159.7-105.3%2014.4-10.2%2017.5-17.6%2018-21.1.2-1.6.3-4.2-2.2-7.4-6.3-8.3-22.3-5.8-43.7%206.9-3.4%202-7.7%201.8-11-.5-3.2-2.3-4.8-6.4-3.9-10.3%201.7-7.5.4-10.4-.2-11.3-.8-1.2-2.4-2-4.9-2.5-7.5-1.5-21.8%201.3-35.6%2010.8-3.4%202.4-7.9%202.4-11.3.1-3.4-2.3-5.1-6.5-4.1-10.6.7-3%201.2-6.9-.7-8.3-5.3-3.9-23.2-1-34.3%205.6-15.2%209.1-69.2%2043.3-69.8%2043.6-4.7%202.9-10.8%201.6-13.8-3.1s-1.6-10.8%203.1-13.8c2.2-1.4%2054.8-34.7%2070.2-43.9%2013.9-8.3%2041.5-15.4%2056.3-4.5%202.5%201.9%205.8%205.1%207.7%2010.1%2012.6-5.5%2025.6-7.7%2036-5.7%208%201.6%2014%205.3%2017.8%2011.2%201.5%202.4%202.7%205%203.4%207.9%2032.1-14%2047.7-2.8%2054.5%206%205.2%206.8%207.3%2014.6%206.1%2022.5-1.8%2011.8-10.6%2023.4-26.2%2034.5-13.5%209.6-142.6%2095.5-161.2%20106.3-2.6%201.5-5.2%203.2-7.9%204.8-11.7%207.6-25.5%2016.3-45.1%2016.3zM300%20422h-58c-28%200-63.3-10-64.7-10.4-5.3-1.5-8.4-7.1-6.9-12.4%201.5-5.3%207.1-8.4%2012.4-6.9.3.1%2034.1%209.6%2059.3%209.6h58c30%200%2030-11.3%2030-15%200-13.1-18.8-15-30-15-25.5%200-73.2-12.3-87.7-21-5.4-3.3-9.6-7.9-14-12.7-11.3-12.2-24-26.2-63.7-26.2-21.2%200-30.4%203.8-42.1%208.6-2%20.8-4%201.6-6%202.5-25.6%2010.2-71.8%2032.3-72.2%2032.5-5%202.4-11%20.3-13.3-4.7s-.3-11%204.7-13.3c1.9-.9%2047.2-22.6%2073.5-33.1%202-.8%203.9-1.6%205.8-2.3%2012.6-5.2%2024.5-10.1%2049.7-10.1%2048.6%200%2066.6%2019.8%2078.4%2032.8%203.5%203.9%206.6%207.3%209.5%209%2011.7%207%2056%2018.1%2077.4%2018.1%2046.4%200%2050%2026.8%2050%2035-.1%2013.1-6.6%2035-50.1%2035zM338.5%20408.9c-3.2%200-6.4-1.5-8.3-4.4-3.1-4.6-1.9-10.8%202.7-13.9l90.3-60.8c4.6-3.1%2010.8-1.9%2013.9%202.7%203.1%204.6%201.9%2010.8-2.7%2013.9l-90.3%2060.8c-1.7%201.2-3.6%201.7-5.6%201.7zM317.1%20373.3c-3.2%200-6.3-1.5-8.2-4.3-3.1-4.6-2-10.8%202.6-13.9l55.7-38.4c4.6-3.1%2010.8-2%2013.9%202.6%203.1%204.6%202%2010.8-2.6%2013.9l-55.7%2038.4c-1.8%201.1-3.8%201.7-5.7%201.7zM348.5%20112.5c-2.2%200-4.3-.8-6-2.5l-86.1-86.1-86%2086.1c-3.3%203.3-8.7%203.3-12%200-3.3-3.3-3.3-8.7%200-12l98-98%2098%2098c3.3%203.3%203.3%208.7%200%2012-1.6%201.7-3.7%202.5-5.9%202.5zM256.5%20290.4c-4.7%200-8.5-3.8-8.5-8.5V16.2c0-4.7%203.8-8.5%208.5-8.5s8.5%203.8%208.5%208.5V282c-.1%204.7-3.9%208.4-8.5%208.4z%22%2F%3E%3C%2Fsvg%3E');
所有现代浏览器都显示 SVG。在 Microsoft Edge 中不是。这可能是 Edge 中的错误吗？
他们实际上都在为我工作。
你能否查看 this jsbin 让我知道它是否不适用于你的 Edge 版本？
我找到了解决问题的方法。
SVG 使用旧版本的 grunticon 进行编码，并使用 CSS 中的填充 属性 进行动态着色。
将 grunticon 更新到版本 2.0 解决了 Edge 中的问题。
我创建了以下笔来演示我的问题： http://codepen.io/anon/pen/mewVGB
我尝试将 URL 编码的 SVG 图像作为背景图像，如下所示：
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20512%22%20enable-background%3D%22new%200%200%20500%20512%22%3E%3Cpath%20d%3D%22M258.9%20512c-11.3%200-24.6-2.9-40.5-10.7-10.7-5.2-44.8-22.9-69.7-35.8l-21-10.9c-15.7-8.1-20.2-7.1-32.5.7l-26.9%2017.6c-4.6%203-10.8%201.7-13.8-2.9s-1.7-10.8%202.9-13.8l27-17.6c16.9-10.8%2029.1-13.8%2052.5-1.7l21%2010.9c24.8%2012.9%2058.7%2030.5%2069.2%2035.6%2033.4%2016.3%2048.7%206.6%2066.4-4.5%202.8-1.8%205.7-3.6%208.5-5.2%2017.6-10.2%20146.8-96.1%20159.7-105.3%2014.4-10.2%2017.5-17.6%2018-21.1.2-1.6.3-4.2-2.2-7.4-6.3-8.3-22.3-5.8-43.7%206.9-3.4%202-7.7%201.8-11-.5-3.2-2.3-4.8-6.4-3.9-10.3%201.7-7.5.4-10.4-.2-11.3-.8-1.2-2.4-2-4.9-2.5-7.5-1.5-21.8%201.3-35.6%2010.8-3.4%202.4-7.9%202.4-11.3.1-3.4-2.3-5.1-6.5-4.1-10.6.7-3%201.2-6.9-.7-8.3-5.3-3.9-23.2-1-34.3%205.6-15.2%209.1-69.2%2043.3-69.8%2043.6-4.7%202.9-10.8%201.6-13.8-3.1s-1.6-10.8%203.1-13.8c2.2-1.4%2054.8-34.7%2070.2-43.9%2013.9-8.3%2041.5-15.4%2056.3-4.5%202.5%201.9%205.8%205.1%207.7%2010.1%2012.6-5.5%2025.6-7.7%2036-5.7%208%201.6%2014%205.3%2017.8%2011.2%201.5%202.4%202.7%205%203.4%207.9%2032.1-14%2047.7-2.8%2054.5%206%205.2%206.8%207.3%2014.6%206.1%2022.5-1.8%2011.8-10.6%2023.4-26.2%2034.5-13.5%209.6-142.6%2095.5-161.2%20106.3-2.6%201.5-5.2%203.2-7.9%204.8-11.7%207.6-25.5%2016.3-45.1%2016.3zM300%20422h-58c-28%200-63.3-10-64.7-10.4-5.3-1.5-8.4-7.1-6.9-12.4%201.5-5.3%207.1-8.4%2012.4-6.9.3.1%2034.1%209.6%2059.3%209.6h58c30%200%2030-11.3%2030-15%200-13.1-18.8-15-30-15-25.5%200-73.2-12.3-87.7-21-5.4-3.3-9.6-7.9-14-12.7-11.3-12.2-24-26.2-63.7-26.2-21.2%200-30.4%203.8-42.1%208.6-2%20.8-4%201.6-6%202.5-25.6%2010.2-71.8%2032.3-72.2%2032.5-5%202.4-11%20.3-13.3-4.7s-.3-11%204.7-13.3c1.9-.9%2047.2-22.6%2073.5-33.1%202-.8%203.9-1.6%205.8-2.3%2012.6-5.2%2024.5-10.1%2049.7-10.1%2048.6%200%2066.6%2019.8%2078.4%2032.8%203.5%203.9%206.6%207.3%209.5%209%2011.7%207%2056%2018.1%2077.4%2018.1%2046.4%200%2050%2026.8%2050%2035-.1%2013.1-6.6%2035-50.1%2035zM338.5%20408.9c-3.2%200-6.4-1.5-8.3-4.4-3.1-4.6-1.9-10.8%202.7-13.9l90.3-60.8c4.6-3.1%2010.8-1.9%2013.9%202.7%203.1%204.6%201.9%2010.8-2.7%2013.9l-90.3%2060.8c-1.7%201.2-3.6%201.7-5.6%201.7zM317.1%20373.3c-3.2%200-6.3-1.5-8.2-4.3-3.1-4.6-2-10.8%202.6-13.9l55.7-38.4c4.6-3.1%2010.8-2%2013.9%202.6%203.1%204.6%202%2010.8-2.6%2013.9l-55.7%2038.4c-1.8%201.1-3.8%201.7-5.7%201.7zM348.5%20112.5c-2.2%200-4.3-.8-6-2.5l-86.1-86.1-86%2086.1c-3.3%203.3-8.7%203.3-12%200-3.3-3.3-3.3-8.7%200-12l98-98%2098%2098c3.3%203.3%203.3%208.7%200%2012-1.6%201.7-3.7%202.5-5.9%202.5zM256.5%20290.4c-4.7%200-8.5-3.8-8.5-8.5V16.2c0-4.7%203.8-8.5%208.5-8.5s8.5%203.8%208.5%208.5V282c-.1%204.7-3.9%208.4-8.5%208.4z%22%2F%3E%3C%2Fsvg%3E');
所有现代浏览器都显示 SVG。在 Microsoft Edge 中不是。这可能是 Edge 中的错误吗？
他们实际上都在为我工作。
你能否查看 this jsbin 让我知道它是否不适用于你的 Edge 版本？
我找到了解决问题的方法。 SVG 使用旧版本的 grunticon 进行编码，并使用 CSS 中的填充 属性 进行动态着色。
将 grunticon 更新到版本 2.0 解决了 Edge 中的问题。