相关疑难解决方法(0)

内联SVG与SVG文件性能

我目前正在建立一个针对现代浏览器和移动设备的网站.在性能方面,最好是直接在HTML内部使用SVG,<svg>或者更好地使用<img>和/或使用背景图像.我在服务器上运行gzip以进一步压缩我的内容,而不是依赖于Javascript.

html5 svg web

Dav*_*ave

2014 04-23

24
推荐指数

4
解决办法

2万
查看次数

使用“<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);

Run Code Online (Sandbox Code Playgroud)

<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=""/>

Run Code Online (Sandbox Code Playgroud)

如果我直接访问数据 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"/>

Run Code Online (Sandbox Code Playgroud)

css svg shadow-dom

Tho*_*s W

2020 09-04

0
推荐指数

1
解决办法

4229
查看次数