为啥十六进制颜色不适用于 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 颜色?
【问题讨论】:
为什么不单独使用<svg>
。
当然可以。但这只是一个例子。我通过创建一个类来更改项目中预先设计的 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('<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><defs><style>.roundShapefill:#26a7fd;</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>');
<img id='imgBase64' />
【讨论】:
encodeURI
对 URI 中无效的每个字符进行编码,在这个 SVG 中,所有需要编码的是 # 字符,保持所有 SVG 在 Inspector 中可读(并且CPU不需要解码)以上是关于为啥十六进制颜色不适用于 SVG 的 utf8 数据 URL [重复]的主要内容,如果未能解决你的问题,请参考以下文章
为啥 background_gradient 不适用于两种不同的颜色?