知道为什么图案化 SVG 文件在浏览器中显示为空白吗？
我有一个在 Illustrator 中创建的 svg 文件，其中包含一个图案 - 它是使用样本工具制作的。当我尝试在本地加载它时，它在浏览器中显示为空白。
如果您想测试它，这是该文件： http://d.pr/ZvhV
I have an svg file that I created in Illustrator that consists of a pattern - it was made using the swatch tool. When I try and load it locally it shows up blank in the browser.
Here is the file if you want to test it: http://d.pr/ZvhV
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您发现它可以在 Firefox、IE 或 Edge 中运行，但不能在 Chrome 中运行，这也是我的问题。
我通过在文本编辑器中打开 .SVG 文件来修复它，并且在任何地方都看到这个标签：
xlink:href="data:img/png;base64我把它替换为
xlink:href="data:image/png;base64这修复了它，并立即显示。希望这对某人有帮助！
If you find that it works in Firefox, IE or Edge but not Chrome, this was my issue too.
I fixed it by opening the .SVG file in a text editor, and everywhere I saw this tag:
xlink:href="data:img/png;base64I replaced it with
xlink:href="data:image/png;base64This fixed it, and it displayed immediately. Hopefully this helps someone!!
浏览器对 SVG 支持的级别各不相同，因此您的浏览器可能不支持模式。
如果它是网站的一部分，我只需将其导出为 PNG 格式，因为像这样大的矢量图像无论如何都会使访问者的计算机陷入困境。
Browsers have varying levels of SVG support, so your browser may just not support patterns.
If it's part of a website, I'd just export it as a PNG, as a vector image as big as this would bog down visitors' computers anyway.
希望您能解决这个问题，但对于遇到此问题的其他人：
检查 Illustrator 中的另存为 .svg 设置。
标准设置给了我一个空白的 .svg，但是当我弄乱设置（字体类型：SVG、CSS 属性：样式属性、未选中输出较少元素、选中包含 XMP）时，它工作得很好。
顺便说一句，在网站上使用 .svg 是没问题的，只要您有不支持它们的浏览器的备用方案。我相信 Modernizr (http://modernizr.com/) 涵盖了设置。
Hope you got this sorted, but for anyone else having this issue:
Check the saving as .svg settings within Illustrator.
The standard settings gave me a blank .svg, but when I messed with the settings (Font type: SVG, CSS Properties: Style Attribute, Output fewer elements unchecked, Include XMP checked) it worked fine.
On a side note, using .svg is fine on a website, as long as you have a fallback for browsers that don't support them. I believe modernizr (http://modernizr.com/) covers setting that up.