如何在页面的收藏夹图标上设置SVG元素? [英] How do I set an SVG element to my page's favicon?
本文介绍了如何在页面的收藏夹图标上设置SVG元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的页面上有一个SVG元素.我想将其用作页面的收藏夹图标.如何在JavaScript中做到这一点?
I have an SVG element on my page. I want to use it as the page's favicon. How do I do this in JavaScript?
推荐答案
这样做令人费解.您可以在此处看到我的解决方案:方法如下所述(按ID或其他方式获取HTML元素，留给读者练习).
Doing this is astoundingly convoluted. You can see my solution in action here: the methodology is described below (getting the HTML elements, by ID or otherwise, is left as an exercise for the reader).
- 确保您的SVG元素包含属性
xmlns="http://www.w3.org/2000/svg"，因为您将需要将该元素的源作为自己的文件，并且独立SVG文件需要XMLNS声明. (还请注意，这意味着您的SVG必须是独立的，并且不能使用诸如<use>之类的名称引用其父文档中的元素.) - (可选)将元素包装在
<div>或<span>中，您可以使用它们使用.innerHTML获取<svg>元素的内容. (在当前HTML标准中，SVG元素上都不存在innerHTML或outerHTML属性.) - 在页面的
<head>中添加<link rel="icon">.
- Make sure your SVG element includes the attribute
xmlns="http://www.w3.org/2000/svg", as you're going to need to take the source of the element as its own file, and the XMLNS declaration is required for standalone SVG files. (Also note that this means your SVG will need to be self-contained and can't refer to elements in its parent document with something like<use>.) - Optionally, wrap the element in a
<div>or<span>, which you may use to get the content of the<svg>element using.innerHTML. (Neither theinnerHTMLnor theouterHTMLattributes are present on SVG elements in the current HTML standard.) - Include a
<link rel="icon">in your page's<head>.
在JavaScript中
- 通过获取包装了它的HTML元素的
innerHTML属性，或通过在SVG元素上调用new XMLSerializer().serializeToString()，来获取要设置为收藏夹图标的SVG元素的来源. - 通过将字符串
"data:image/svg+xml,"放在源代码的前面，以此元素的形式将DataURL创建为文档. (如果大多数浏览器支持favicon的SVG，我们可以在这里完成，但是由于在撰写本文时，它们不支持，因此我们必须更深入地研究.) - 创建一个要通过其路由图像的
<img>元素，为load事件添加一个事件侦听器，一旦控件返回事件循环，该事件将绘制图像(因为符合规范的浏览器赢得了不能让您同步读取图像-请参阅此问题 )，然后将SVG源的DataURL设置为其src属性. (此步骤与第8步之间的步骤可以立即同步，也可以作为侦听器回调的一部分；它们只需要在绘制图像之前进行即可.) - 确定要将图标图标呈现到的分辨率-我的示例将使用64x64，以与高DPI(视网膜和超级视网膜)显示器兼容.
- 创建一个
<canvas>元素(以前称为canvasElement)并设置其尺寸(通过设置canvasElement.width = 64和canvasElement.height = 64). - 使用
canvasElement.getContext('2d')(以前称为ctx)为画布创建绘图上下文. - 如果要重新使用预先创建的画布，请设置
ctx.globalCompositeOperation = "copy"或用ctx.clearRect(0, 0, 64, 64)清除它. - 在您添加到步骤3中创建的
<img>元素的load侦听器之后的执行顺序中的某个位置，使用ctx.drawImage(svgImg, 0, 0, 64, 64)将图像绘制到画布上(其中svgImg是<img>元素您将src设置为SVG DataURL). - 使用
canvasElement.toDataURL()在画布上创建PNG DataURL，并将 that 设置为HTML中<link rel="icon">元素的href属性.
- Get the source of the SVG element you want to set as your favicon by getting the
innerHTMLattribute of the HTML element you've wrapped it in, or by callingnew XMLSerializer().serializeToString()on the SVG element. - Create a DataURL for this element as a document by prepending the string
"data:image/svg+xml,"to the source. (If most browsers supported SVGs for favicons, we'd be done here, but since, at time of writing, they don't, we must go deeper.) - Create an
<img>element that you'll be routing the image through, add an event listener to it for theloadevent that will draw the image once control returns to the event loop (as spec-compliant browsers won't let you read the image synchronously - see this crbug), and set the DataURL of your SVG source as itssrcattribute. (The steps between this and step 8 can happen either in sync now, or as part of the listener callback; they just need to happen before you draw the image.) - Decide what resolution you want to render your favicon to - My examples will use 64x64, for compatibility with high-DPI (Retina and Super Retina) displays.
- Create a
<canvas>element (heretofore referred to ascanvasElement) and set its dimensions (by settingcanvasElement.width = 64andcanvasElement.height = 64). - Create a drawing context for the canvas using
canvasElement.getContext('2d')(heretofore referred to asctx). - If you're re-using a canvas you've created beforehand, set
ctx.globalCompositeOperation = "copy", or clear it withctx.clearRect(0, 0, 64, 64). - Somewhere in the execution sequence following from the
loadlistener you added to the<img>element you created in step 3, draw the image onto the canvas usingctx.drawImage(svgImg, 0, 0, 64, 64)(wheresvgImgis the<img>element you set thesrcto the SVG DataURL). - Create a PNG DataURL from the canvas using
canvasElement.toDataURL(), and set that to thehrefattribute of the<link rel="icon">element in your HTML.
这篇关于如何在页面的收藏夹图标上设置SVG元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
