为什么十六进制颜色不适用于 SVG 的 utf8 数据 URL

Question

我想知道为什么当我从 utf8 数据 url[=26] 调用 svg 时，我不能使用 HEX 颜色 =].

当我用 rgb 颜色调用它时，它工作得很好:

<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><defs><style>.roundShape{fill: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" height="100" width="100"><defs><style>.roundShape{fill:#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" height="100" width="100"><defs><style>.roundShape{fill:#26a7fd;}</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>');
</script>

是否可以将 HEX 颜色与 utf8 数据一起使用 url？

Answer 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>.roundShape{fill:#26a7fd;}</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>');

<img id='imgBase64' />