为啥十六进制颜色不适用于 SVG 的 utf8 数据 URL [重复]

Posted

技术标签:

【中文标题】为啥十六进制颜色不适用于 SVG 的 utf8 数据 URL [重复]【英文标题】:Why hexadecimal color don't work with utf8 data URL’s for SVG [duplicate]为什么十六进制颜色不适用于 SVG 的 utf8 数据 URL [重复] 【发布时间】:2021-11-11 22:14:24 【问题描述】:

我想知道为什么当我从 utf8 数据 url 调用 svg 时,我不能在样式中使用 HEX 颜色

当我用 rgb 颜色调用它时,它工作得非常好:

<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  ><defs><style>.roundShapefill:rgb(38, 167, 253);</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>'>

但是,如果我使用 HEX 颜色,则 svg 不会显示:

<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  ><defs><style>.roundShapefill:#26a7fd;</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>'>

奇怪的是,在 base64 中一切正常:

<img id='imgBase64'>
<script type="text/javascript">
    document.getElementById('imgBase64').src = 'data:image/svg+xml;base64,'+btoa('<svg xmlns="http://www.w3.org/2000/svg"  ><defs><style>.roundShapefill:#26a7fd;</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>');
</script>

是否可以在 utf8 数据 url 中使用 HEX 颜色?

【问题讨论】:

为什么不单独使用&lt;svg&gt; 当然可以。但这只是一个例子。我通过创建一个类来更改项目中预先设计的 svg 的颜色发现了这个问题,其中每个对象都是在 JS 中动态构建的。应用程序的结构不是为自己调用 svg 而设计的。我已经有了使用 base64 的解决方案,但我很好奇,我不明白为什么 svg 不像示例中的代码那样在非常简单的调用中显示。 也许'#'符号应该被转义,因为它是一个片段标识符? 我在创建themebale circular dotted lines 的 SVG 边框图像方面遇到了类似的问题,并且作为 SCSS 中称为透明化的解决方法来强制对颜色进行 RGBA 编码。一定有更好的办法 十六进制颜色是描述颜色的不好方法。它在 199 倍上工作,其中计算机最多只有 16 种颜色(最好是 256 种),因此有足够的额外空间。但多年来,我们的屏幕都有 30 位或更多位的颜色,我们无法在网络上表示它。我们只需要摆脱十六进制颜色(CSS 和 SVG 允许我们支持更多,并让程序员意识到十六进制颜色很烂)。 【参考方案1】:

您可能想使用encodeURIComponent(),因此不存在解析问题:

document.getElementById('imgBase64').src = 'data:image/svg+xml;utf8,'+encodeURIComponent('&lt;svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"&gt;&lt;defs&gt;&lt;style&gt;.roundShapefill:#26a7fd;&lt;/style&gt;&lt;/defs&gt;&lt;circle cx="50" cy="50" r="40" class="roundShape" /&gt;&lt;/svg&gt;');
&lt;img id='imgBase64' /&gt;

【讨论】:

encodeURI 对 URI 中无效的每个字符进行编码,在这个 SVG 中,所有需要编码的是 # 字符,保持所有 SVG 在 Inspector 中可读(并且CPU不需要解码)

以上是关于为啥十六进制颜色不适用于 SVG 的 utf8 数据 URL [重复]的主要内容,如果未能解决你的问题,请参考以下文章

CSS 背景颜色不适用于溢出的 SVG 内容

为啥 background_gradient 不适用于两种不同的颜色?

更改内联 SVG 的笔触颜色

无法弄清楚为啥我的字符、字数和行数适用于文件输入,但不适用于标准输入

svg gradient

用复选框切换 svg 圆圈颜色