我有一个 SVG 图标。我想让它有不同的颜色作为图标。
由于 SVG 元素没有任何 toDataUrl() 我没有看到不涉及服务器的解决方案。
对客户端解决方案有任何想法吗？
问问题
5372 次
3 回答
5
fabric.js支持将 SVG 元素渲染为canvas元素。
于 2010-10-08T12:36:44.373 回答
5
这不完全是您所要求的，但这里有一个页面测试浏览器中对 svg favicons 的支持。
如果浏览器支持 svg 作为 favicon，那么从 svg 标记生成数据 url 并使用它是很简单的。但是，如果您想要一个光栅图像（png、jpg），那么是的，请查看画布解决方案。有些人甚至在 favicon 中制作游戏...
于 2010-10-08T14:20:29.820 回答
2
您有一个 SVG 图标，并且希望将其用作网站图标，这样您就可以在不访问服务器的情况下以不同的颜色显示它。
对客户端解决方案有任何想法吗？
Firefox 41引入了对 SVG 图标的支持。这是我刚才在 Firefox 52 中测试的一个例子：
<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E">
将它放在您的页面中，并在您通过脚本更改它时观察它的更新。
笔记
- 使用值为的
sizes属性向浏览器提示它是一个矢量图标。any - 对于浏览器支持：http ://caniuse.com/#feat=link-icon-svg 。
- 有关编码提示，请参阅优化数据 URI中的 SVG。
于 2017-04-12T14:05:49.117 回答