移动 Safari SVG 问题答案

【问题标题】：Mobile Safari SVG Problem移动 Safari SVG 问题
【发布时间】：2019-05-09 15:03:59
【问题描述】：

我正在尝试让 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>

【问题讨论】：

我建议看看这里的示例，了解如何开始使用 SVG：croczilla.com/bits_and_pieces/svg/samples 以下是一些简单的示例，说明如何在 XHTML 中包含内联 SVG 内容：croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml@987654324 @

标签： iphone svg mobile-safari

【解决方案1】：

将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 类型是 "Content-Type: text/html"。 HTML inline svg 适用于 MIME 类型 "Content-Type: text/xml" 您可以通过使用 XML 而不是 HTML 结束文档来创建它，因为它们有 done here。

不确定 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"> 开头；

<?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>

【讨论】：

事实上，据我所知，它适用于除 iPad/iPhone 之外的所有设备。我插入了 RaphaelJS，它现在也可以在 iOS 上运行。我也尝试了 xmlns 和 version 属性，结果相同，除了 iOS 之外的任何地方都可以使用。
它确实在使用 webkit 引擎的 Chrome 中呈现（所以 Ipad 应该呈现 - 我还没有）：但目前不能在 firefox 3.6.13 中工作......这可能是因为内容类型是 "Content-Type: text/html" ... 在严格的 xml 规则下需要定义 xmlns。不应用严格的 xml 规则，但不幸的是 firefox 3.6.13 仍然不呈现内联 svg。 ...通过使用code.google.com/chrome/chromeframe，它也可以在 Internet Explorer 中运行
我知道它理论上应该可以在任何 webkit 浏览器中运行，如果它可以在一个浏览器中运行。它只是没有。我已经在我的主域的另一个页面中切换了所有内容，以测试您提供的所有不同选项，但没有一个有效。唯一可行的方法是通过 JavaScript 在加载后生成它。我已经单独留下了原始页面，以便它仍然与原始问题匹配。
即使使用 JS 后加载，我也无法将其加载到 iPhone 上。有什么线索吗？
“独立”位似乎非常重要：我的带有 svg 源的图像在 iPad 1 上使用 jQuery 更改 src 属性时被压扁。添加“独立”解决了这个问题。跨度>

【解决方案2】：

我想我会在这里加上这个，虽然它主要与标题有关。

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

将position: absolute 添加到 svg 标记解决了我的问题，并且它在 iOS 和其他任何地方都能正确呈现（父元素已经定位，所以这不会改变 svg 的实际位置）。其他位置样式也可以使用。

【讨论】：

我遇到了和你类似的问题。我的解决方法是通过向 svg 的父级和容器添加“位置：相对”。
问题是缺少父区域的定位上下文。大多数浏览器倾向于将定位上下文作为默认级联，但似乎 iOS 没有，至少对于 SVG 而言。一旦你给它的父级提供了一些上下文（无论是“相对”、“绝对”还是“静态”），它就会确认其上下文的维度是什么——然后它可以正确地与 100% 的父级相关联。更多关于css定位的信息：alistapart.com/article/css-positioning-101

【解决方案3】：

我之前在移动 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 中。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

在 HTML 文档中包含 SVG 标记是 HTML5 解析器的一项新功能。如果您为 Mac OS X 或 Windows 下载并运行 nightly build of WebKit，您将看到您的测试用例按预期工作。

【讨论】：

iPhone 不是应该完全兼容 HTML5，还是原生 SVG 处理不是 HTML5 标准的一部分？
@md5sum：HTML5 目前仍是规范草案（显然要在 2014 年完成），因此“符合 HTML5”是一个松散的术语。移动 Safari 浏览器支持 HTML5 的某些功能，但不支持其他功能。内联 SVG 是 HTML5 草案规范的一部分，但尚未包含在移动 safari 浏览器中。当前包含的规范部分示例包括 HTML5 音频和视频标签。

【解决方案6】：

即使在此页面上有所有其他建议，我也无法让它工作（即使在 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 文件。

【讨论】：

【解决方案7】：

您是否尝试将其嵌入到 <object> 标记中。

<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>

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

【讨论】：