Question

这不会发生在Chrome上，但至少会在FF和MS Edge上发生。在FF中，当您尝试在CSS url()或object标记内部绘制svg时，如果svg包含类似#FF0000的#hex颜色，则会崩溃。让我举个例子：

＆＃13;

<p>Not using # colors</p>
<object type="image/svg+xml" data="data:image/svg+xml;charset=UTF-8,<?xml version='1.0' encoding='utf-8'?><svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'><circle fill='red' cx='50' cy='54.7' r='15.72'/></svg>">
  No SVG UTF8
</object>

<p>Using #hex colors (won't show on FF)</p>
<object type="image/svg+xml" data="data:image/svg+xml;charset=UTF-8,<?xml version='1.0' encoding='utf-8'?><svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'><circle fill='#FF0000' cx='50' cy='54.7' r='15.72'/></svg>">
  No SVG UTF8
</object>

＆＃13;

为什么会这样？在SVG中有没有其他方法来编写这些颜色？

Answer 1

保留URL中的哈希字符以指示fragment identifier的开头。

您需要将＃编码为％23。

这是一个Chrome错误，它不会强制执行此规则或确实正确解析网址。

Answer 2

我坚信，你对object标签的属性做错了。我刚刚删除了一些属性并使其变得简单。

＆＃13;

<object type="image/svg+xml">
  <svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'>
    <circle fill='#FF0000' cx='50' cy='54.7' r='15.72' />
  </svg>
  No SVG UTF8
</object>

＆＃13;

在这种情况下，它没有任何问题。

此外，没有必要object嵌入svg代码。你可以简单地把它写在html文件中。

＆＃13;

<svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'>
  <circle fill='#FF0000' cx='50' cy='54.7' r='15.72' />
</svg>

＆＃13;

您可以参考MDN了解更多详情。

<小时/> 如果您尝试将svg图像用作data url，首先需要使用mobilefish等网站托管的某些工具对图像进行编码。

＆＃13;

<object type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1
sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHg9JzBweCcgeT0nMHB4Jy
B3aWR0aD0nNzBweCcgaGVpZ2h0PSc3MHB4JyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sOnNwY
WNlPSdwcmVzZXJ2ZSc+CiAgICA8Y2lyY2xlIGZpbGw9JyNGRjAwMDAnIGN4PSc1MCcgY3k9JzU0
LjcnIHI9JzE1LjcyJyAvPgogIDwvc3ZnPg==">
  fallback
</object>

＆＃13;

Firefox在内联SVG中读取#hex颜色代码时抛出错误

2 个答案: