移动 Safari SVG 问题

发布于 2024-10-09 07:59:41 字数 756 浏览 0 评论 0原文

我试图让 SVG 图像显示在我的 iPhone（或 iPad）默认浏览器上，但我似乎无法显示甚至只是一个矩形。

示例位于： http://www.invalidpage.com/svg/svgtest.html

来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
  <body>
    <div>
      <svg width="500" height="220">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>
    </div>
  </body>
</html>

原文

I'm trying to get an SVG image to show up on my iPhone (or iPad) default browser, but I can't seem to get even just a rect to show up.

Example at: http://www.invalidpage.com/svg/svgtest.html

Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
  <body>
    <div>
      <svg width="500" height="220">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>
    </div>
  </body>
</html>

分享到QQ

分享到微博

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

发布评论

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

简美 2024-10-16 07:59:41

将 xmlns="http://www.w3.org/2000/svg" version="1.1" 添加到您的 svg 标记中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
<body >
      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>


</body>
</html>

http://www.invalidpage.com/svg/svgtest.html 提供的 HTTP MIME 类型是
“内容类型：text/html”。 HTML 内联 svg 使用 MIME 类型 "Content-Type: text/xml" 您可以通过以 XML 而不是 HTML 结尾文档来创建此内容，因为它们具有在此处完成。

不确定 Ipad 是否关心 Content-Type，但其他浏览器则关心。

已更新

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

也可以使用；这是 Ipad svg 示例中显示的内容。当文档以 XML 而不是 HTML 形式交付时，应以开头；

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>

Add xmlns="http://www.w3.org/2000/svg" version="1.1" to your svg tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
<body >
      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>


</body>
</html>

The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is
"Content-Type: text/html". HTML inline svg works with the MIME type "Content-Type: text/xml" You can create this by ending the document with XML instead of HTML as they have done here.

Not sure if Ipad cares about the Content-Type but other browsers do.

Updated

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Can also be used; It is what is being shown on the Ipad svg examples. When the document is delivering as an XML not HTML, it should start with <xml version="1.0" standalone="no">;

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>

回复收藏 0 原文

花伊自在美 2024-10-16 07:59:41

我想我会把它加在这里，尽管它主要与标题相关。

我的 SVG 标签可以在每个浏览器（甚至 IE9+）中正确渲染所有内容，除了 iOS。我将 svg 的 css 高度设置为 100%，这在任何地方都有效，但在 iOS 上，它似乎是整个页面高度的 100%，而不仅仅是其父元素的高度！这导致我的内部 SVG 元素在其视口之外渲染。

在 svg 标签中添加 position:absolute 解决了我的问题，并且它在 iOS 和其他任何地方都能正确呈现（父元素已经定位，因此这不会改变 svg 的实际位置）。其他位置风格也可能有效。

回复收藏 0 原文

你没皮卡萌 2024-10-16 07:59:41

我之前在使用移动 Safari 时也遇到过这个问题。您可以做的是通过 javascript 将 SVG 加载到 DOM 中：

$(document).ready(function(){
    var svg = '<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect></svg>';
    var chart = document.adoptNode($('svg', $.parseXML(svg)).get(0));

    $('body').html(chart);
);

这只是一个示例 - 显然您不会在实践中将 SVG 存储在这样的字符串中。

您可以通过 ajax 从服务器检索 SVG 字符串，然后根据需要使用上述方法加载到 DOM 中。

I have had this problem before too with mobile Safari. What you can do is load the SVG into the the DOM via javascript:

$(document).ready(function(){
    var svg = '<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect></svg>';
    var chart = document.adoptNode($('svg', $.parseXML(svg)).get(0));

    $('body').html(chart);
);

That's just an example - obviously you're not going to store your SVG in a string like that in practice.

You could retrieve the SVG string from the server via ajax, and then load into the DOM using the above approach if you wanted.

回复收藏 0 原文

想你的星星会说话 2024-10-16 07:59:41

我在 IOS 浏览器中显示大型 SVGS（尺寸）时也遇到问题。通过缩小规模，我确实让它发挥了作用。

我认为大约 1000px 及以下就可以了..
我的一个朋友告诉我这可能与 IOS 的整数限制有关。

http://msdn.microsoft.com/en-us/library/7fh3a000.aspx

回复收藏 0 原文

过潦 2024-10-16 07:59:41

iOS 4.2.1 及更早版本的 Safari 不支持在不使用格式良好的 XHTML 文档和命名空间的情况下将 SVG 标签与 HTML 标签混合（请参阅 Wayne 的答案），Mac OS X 和更早版本的 Safari 5.0.x 及更早版本也不支持。视窗。

在 HTML 文档中包含 SVG 标签是 HTML5 解析器的一项新功能。如果您下载并运行适用于 Mac OS X 或 Windows 的每夜构建的 WebKit，您将看到您的测试案例按预期工作。

回复收藏 0 原文

别靠近我心 2024-10-16 07:59:41

即使有这个页面上的所有其他建议，我也无法让它工作（即使在 Safari 中）。

所以我在以下位置找到了一个工作示例：

http://upload.wikimedia.org /wikipedia/en/3/35/Starbucks_Coffee_Logo.svg

并将文件复制到我自己的网站。仍然没有运气，所以我使用 Rex Swain 的 HTTP 查看器查看了该文件和我自己的文件：

http:// www.rexswain.com/httpview.html

差异变得显而易见。 我的 svg 被用作 text/html，星巴克徽标被用作 image/svg+xml。

解决方案是通过添加以下内容来更改标头：

addtype image/svg+xml .svg

到 .htaccess 文件。

Even with all the other advice on this page I couldn't get it to work (even in Safari).

So I found a working example at:

http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg

and copied the file to my own site. Still no luck, so I had a look at that file and my own using Rex Swain's HTTP viewer:

http://www.rexswain.com/httpview.html

The difference became obvious. My svg was being served as text/html, and the Starbucks logo was being served as image/svg+xml.

The solution was to change the header by adding:

addtype image/svg+xml .svg

to the .htaccess file.

回复收藏 0 原文

故人的歌 2024-10-16 07:59:41

您是否尝试将其嵌入

<object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>

例如，

<object type="image/svg+xml" item-prop="image" id="svgImage" data="images/svgImage.svg"></object>

我认为这应该可以解决问题！

have you tried to embed it inside an <object> tag.

<object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>

e.g

<object type="image/svg+xml" item-prop="image" id="svgImage" data="images/svgImage.svg"></object>

I think this should do the trick!

回复收藏 0 原文

~没有更多了~

关于作者

漫雪独思

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

移动 Safari SVG 问题

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

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

花开柳相依

zyhello

故友

对风讲故事

Oo萌小芽oO

梦明

友情链接

移动 Safari SVG 问题

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

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

花开柳相依

zyhello

故友

对风讲故事

Oo萌小芽oO

梦明

友情链接

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