如何解决使用`<use>`元素为SVG生成IMG src数据URI 注意:
是否有安全原因阻止<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都会给出如下错误消息:
数据URI中带有<use>
元素的图像损坏示例:
<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"/>
解决方法
在现代浏览器中,您不必再在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动画
-
这是摆脱(blo肿的)IconFonts的好方法
https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/ -
,由于您标记了问题
WebComponent
,请参阅:https://IconMeister.github.io
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。