Chrome 不显示 SVG 文件

发布于 2024-10-22 10:12:27 字数 567 浏览 2 评论 0原文

我有一个嵌入在 HTML5 文件中的 SVG ilustration,当我在本地尝试时,该文件适用于所有现代浏览器,但是当我尝试从网络上提供它们时,我无法让 Chrome 渲染 SVG 图像,它只渲染 SVG 源代码。我已经将此行添加到 .htaccess 文件中,该文件解决了 Safari 和 Firefox 中的问题:

AddType image/svg+xml svg
AddType image/svg+xml svgz
AddEncoding x-gzip .svgz

但 Chrome 现在是唯一一个在来自网络时不渲染图像的浏览器。 我的本地文件即使在 Chrome 中也能正常工作。

我缺少什么?

这是该问题示例的链接,在 Safari 和 Firefox 上尝试一下,它会起作用。但在 Chrome 中,情况有所不同。

编辑:链接已损坏,似乎缺少 www.前缀: http://www.getformgallery.com/demo/gos-form.html

I have a SVG ilustration embeded in an HTML5 file which works in all modern browsers when I try it on local, but when I try to serve them from the web I dont get Chrome to render the SVG image, it only renders the SVG source code. I already added this lines to an .htaccess file which solved the issues in Safari and Firefox:

AddType image/svg+xml svg
AddType image/svg+xml svgz
AddEncoding x-gzip .svgz

But Chrome now is the only browser that doesn't render the image when comes from the web.
My local file works fine even in Chrome.

What am I missing?

Here is the link to the sample of the issue, try it on Safari and Firefox, it will work. But in Chrome the story is different.

EDIT: Link was broken and seems to be missing www. prefix:
http://www.getformgallery.com/demo/gos-form.html

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

一身软味 2024-10-29 10:12:27

我有同样的问题。在某些 Chrome 更新之前,我在网站中使用的 svg 可以工作,但从某些 Chrome 更新开始,这些 svg 不起作用,页面也不会加载,只会加载 1-2 秒,然后重定向到哦,快照。

最后我明白了。您必须在对象标签中定义“宽度”和“高度”
例如。

<object height="100%" width="100%"data="images/image.svg" type="image/svg+xml"></object>

I have the same problem. Before some Chrome updates the svg I used in my site works but from certain Chrome updates those svg didn't worked and the page won't load either, just loads for 1-2s and then redirected to Aw, snap.

Finally I figure it out. You have to define "width" and "height" in Object tag
eg.

<object height="100%" width="100%"data="images/image.svg" type="image/svg+xml"></object>
墨洒年华 2024-10-29 10:12:27

您是否使用 SVG Hero 之类的扩展从 Photoshop 导出 SVG?如果是,您是否导出了智能对象?我遇到了同样的问题,但通过从 Illustrator 保存 SVG 来解决它。现在我的 SVG 可以在所有浏览器中运行。

Did you export the SVG from Photoshop using an extension like SVG Hero? If so, did you export a smart object? I had the same problem, but fixed it by saving the SVG from Illustrator instead. Now my SVG works in all browsers.

别忘他 2024-10-29 10:12:27

我使用的是 Google Chrome 18,即使直接转到 SVG 图像,示例页面对我来说渲染效果也很好。这个问题可能会被浏览器制造商解决。

I am using Google Chrome 18 and the sample-page renders fine for me, even after going to the SVG image directly. The problem might be solved by the browser-makers.

窗影残 2024-10-29 10:12:27

如果您运行lighttpd,您可能需要将 svg mime 类型添加到配置文件:

mimetype.assign             = (
  ".svg"          =>      "image/svg+xml"
)

并将样式直接设置到 标记中(即 < ;img style="width:100%" src="picture.svg">)。

If you run lighttpd, you may have to add the svg mime type to configuration file:

mimetype.assign             = (
  ".svg"          =>      "image/svg+xml"
)

and set the style directly into the <img> tag (i.e. <img style="width:100%" src="picture.svg">).

秋风の叶未落 2024-10-29 10:12:27

Chrome 支持 SVG 文件,但不完全支持。有时你可能会遇到一些问题。尝试此链接以获得答案的帮助。

http://upload.wikimedia.org/wikipedia/commons/f/f6 /Western_Australia_Local_Government_Areas.svg

SVG files are supported in chrome but are not supported fully. You might have some issue sometimes. Try this link to get help to your answer.

http://upload.wikimedia.org/wikipedia/commons/f/f6/Western_Australia_Local_Government_Areas.svg

心舞飞扬 2024-10-29 10:12:27

Chrome、Firefox、Opera、Safari 和所有其他现代浏览器(IE 除外)本身就支持 SVG,无需插件。所以你首先获得插件并尝试访问

Chrome, Firefox, Opera, Safari and all other modern browsers (with the exception of IE) support SVG natively without the need for plugins. so you get plugin First and try do access

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文