Question

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

Answer 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内联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>

Answer 2

想想我会在这里解决这个问题，虽然它主要与标题有关。

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

在svg标记中添加position: absolute修复了我的问题，并在iOS和其他任何地方正确呈现（父元素已经定位，因此这并没有改变svg的实际位置）。其他职位风格也可以起作用。

Answer 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中。

Answer 4

我在IOS浏览器中显示大SVGS（维度）时遇到问题。通过缩小它，我确实让它发挥作用。

我认为大约1000px和下来会做到这一点.. 我的一个朋友告诉我，它可能与IOS的Integer Limits有关。

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

Answer 5

在Safari for iOS 4.2.1及更早版本中不支持将SVG标记与HTML标记混合，而不使用格式正确的XHTML文档和名称空间（请参阅Wayne的答案），在Mac上的Safari 5.0.x及更早版本中也不支持OS X和Windows。

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

Answer 6

我建议您查看以下示例，了解如何开始使用SVG：

http://croczilla.com/bits_and_pieces/svg/samples/

以下是一些简单示例，说明如何在XHTML中包含内联SVG内容：

http://croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml

http://croczilla.com/bits_and_pieces/svg/samples/dom2/dom2.xml

Answer 7

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

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

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

Answer 8

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

移动Safari SVG问题

8 个答案: