如何将SVG元素设置到我的页面'；法维康是谁？

我的页面上有一个SVG元素。我想用它作为网页的图标。如何在JavaScript中做到这一点？

这样做令人惊讶地复杂。您可以看到我的解决方案在起作用：方法如下所述（通过ID或其他方式获取HTML元素，留给读者作为练习）

在HTML中

确保SVG元素包含属性

xmlns=”http://www.w3.org/2000/svg“

，因为您需要将元素的源代码作为自己的文件，并且独立SVG文件需要XMLNS声明。（还请注意，这意味着您的SVG需要是自包含的，不能使用类似

的内容引用其父文档中的元素）

（可选）将元素包装在

或

中，您可以使用

.innerHTML

获取

元素的内容。（当前HTML标准中的SVG元素上既不存在

innerHTML

属性，也不存在

outerHTML

属性。）

在页面的

中包含

在JavaScript中

获取要设置为favicon的SVG元素的源代码，方法是获取已包装的HTML元素的

innerHTML

属性，或者在SVG元素上调用

new XMLSerializer（）.serializeToString（）

通过将字符串

“data:image/svg+xml，”

前置到源代码，将此元素的DataURL创建为文档。（如果大多数浏览器都支持Favicon的SVG，我们就到此为止，但在撰写本文时，它们不支持SVG，所以我们必须深入研究。）

创建一个

属性。（此步骤和步骤8之间的步骤可以立即同步进行，也可以作为侦听器回调的一部分进行；它们只需要在绘制图像之前进行。）

决定要将favicon渲染到什么分辨率-我的示例将使用64x64，以与高DPI（视网膜和超级视网膜）显示器兼容

创建一个

元素（以前称为

canvasElement

）并设置其尺寸（通过设置

canvasElement.width=64

和

canvasElement.height=64

）

使用

canvasElement.getContext（'2d'）

（以前称为

ctx

）为画布创建绘图上下文

如果您正在使用预先创建的画布，请设置

ctx.globalCompositeOperation=“copy”

，或使用

ctx.clearRect（0,0,64,64）

清除它

从添加到SVG数据URL的

中的
加载
侦听器的执行序列中的某个位置）

使用

canvascelement.toDataURL（）

从画布创建PNG数据URL，并将其设置为HTML中

元素的

href

属性

---

我知道它已经得到了回答，但是对于这样一个简单的任务来说，要做的工作太多了，只需将svg存储在一个svg文件中，并将其用作favicon in Head标记

<link rel="shortcut icon" href="favicon.svg" type="image/x-icon">

此外，由于以下原因，您当前需要确保在

元素上指定了

width

和

height

属性。使用保存Base64编码步骤为画布创建Blob可能会更快。这支持哪些浏览器？这在所有当前浏览器中都适用（支持Canvas、drawImage、toBlob和/或toDataURL），在撰写本文时，它确实做到了；但是，这似乎在Chrome中被打破了，因为。@ElliotLabs我更新了帖子，修复了依赖于不符合规范行为的部分（当Chrome修复了他们的规范合规性时，触发了我在上面链接的错误）：此处描述的过程应适用于所有现代浏览器。即使在2021年，对不同浏览器的支持也不统一-是的，它的主要问题是在移动浏览器中，这会导致丑陋的UI