☰

在 Windows 上查看白色 SVG 的最佳方式

tag-icon • tag-icon microsoft-edge svg viewer
在 Windows 上查看白色 SVG 的最佳方式

SVG 可以在 Edge 浏览器中轻松查看。但是，白色浏览器背景上的白色 SVG 看起来不太好看。我需要为此安装外部程序吗？还是我缺少设置？

答案1

没有直接查看白色 SVG 的方法，但您可以做一些修改以在 Chrome 浏览器上查看它们。将 svg 拖放到 Chrome 浏览器并打开开发工具（f12 或 ctrl + shift + i），然后将最顶层 DOM 元素的背景颜色更改为黑色，然后您就可以查看白色 SVG 了。

找到最顶层的 dom 并改变背景颜色

黑色背景上的白色 svg

答案2

我创建了一个书签小程序，将背景设置为棋盘格图案。创建一个书签并将其设置为 URL

javascript:(function(){document.body.style.background = null;document.body.children[0].style.background=null; document.children[0].style.backgroundImage = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill-opacity="0.3" width="50" height="50" ><g fill="grey"><rect x="50" width="50" height="50" /><rect y="50" width="50" height="50" /></g><rect width="50" height="50" /><rect y="50" x="50" width="50" height="50" /></svg>')`;})();

然后，如果您加载白色的 SVG，点击此书签，它会将背景设置为棋盘格。

我一直在改进这个书签，因此 repo 在这里：https://github.com/Myster/TransparentBackgroundRevealer 它还包含最新版本的热链接。因此您可能希望进行分叉，以便查看任何更改。

相关内容