css - 使用 ` 为 SVG 生成 IMG src 数据 URI` 元素

Question

是否存在阻止<use>元素在数据 URI 图像中工作的安全原因？我试过这样的事情：

const svg = document.querySelector("svg");
const img = document.querySelector("img");
img.src = "data:image/svg+xml;charset=UTF-8," + encodeURI(svg.outerHTML);

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="foo" width="100" height="100"/>
  <use xlink:href="#foo" x="10" y="10"/>
</svg>
<img src=""/>

如果我直接访问数据 URI，Chrome 和 Firefox 都会给出这样的错误消息：

<use>数据 URI 中包含元素的损坏图像示例：

<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20width=%22110%22%20height=%22110%22%3E%0A%20%20%3Crect%20id=%22foo%22%20width=%22100%22%20height=%22100%22/%3E%0A%20%20%3Cuse%20xlink:href=%22#foo%22%20x=%2210%22%20y=%2210%22/%3E%0A%3C/svg%3E%0A"/>

标签： csssvgshadow-dom

Answer 1

在现代浏览器中，您不再需要在 SVG 数据 URI中转义<和> 。

也不xlink需要过时的符号。

但是# 必须用%23转义

对于字符串处理，使用单引号更容易

这使得正确的字符串：

data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' 
     viewBox='0 0 96 96'>
<rect id='USED' width='50%' height='50%' stroke='red'/>
<use href='%23USED' x='24' y='24'/>
</svg>

<style>
 rect{
  fill:blue !important; /* would work for INline SVG, not for data URI SVG */
 }
 img {
   width:200px;
   filter: drop-shadow(5px 5px 5px gold);
 }
</style>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><rect id='USED' width='50%' height='50%' stroke='red'/><use href='%23USED' x='24' y='24'/></svg>">

笔记：

• IMG src 将 SVG 放置在（内部）shadowRoot 中，因此您不能再应用 CSS

• 图像仍然是由 SVG 解析器处理的 SVG，因此所有 SVG 都适用……是的，您可以添加 SMIL 动画

• 这是摆脱（臃肿）IconFonts 的好方法
  https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/

• 并且由于您标记了您的问题WebComponent，请参阅：https ://IconMeister.github.io