logo标签列表

移动版Safari的SVG问题

iphonesvgmobile-safari
39

我正在尝试在iPhone（或iPad）默认浏览器中显示SVG图像，但是即使只是一个矩形也无法显示。

示例网址：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: 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 - jbeard4
7个回答
45

在你的SVG标签中添加xmlns="http://www.w3.org/2000/svg" version="1.1"。

<!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 结尾来创建该类型，就像他们在 这里 做的那样。

不确定 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之外的所有地方都可以工作。 - Nathan Wheeler
它在使用webkit引擎的Chrome中呈现（因此iPad应该呈现-我还没有一个）：但目前在Firefox 3.6.13中不起作用...这很可能是因为内容类型是“Content-Type：text / html”...在严格的xml规则下，xmlns需要被定义。<! DOCTYPE html>不适用于严格的xml规则，但是不幸的是，Firefox 3.6.13仍然无法呈现<! DOCTYPE html>内联svg。通过使用http://code.google.com/chrome/chromeframe/，它也将在Internet Explorer中工作。 - Wayne
理论上，如果在其中一个Webkit浏览器中可以工作，它应该可以在任何Webkit浏览器中工作。但事实并非如此。我已经将所有内容切换到主域上的另一页以测试您提供的所有不同选项，但都没有起作用。唯一有效的方法似乎是通过JavaScript在加载后生成它。我保留了原始页面，以使其仍然与原始问题匹配。 - Nathan Wheeler
我即使在JS后加载也无法在iPhone上加载这个，有任何线索吗？ - Mauvis Ledford
“独立的”这一点似乎非常重要：当在iPad 1上使用jQuery更改src属性时，我的带有SVG源的图像会被压缩。添加“独立的”解决了这个问题。 - kasimir
Safari 可能使用 WebKit，就像 Chrome 和 Opera 一样，但 Safari 也是 Mac 平台，其功能与 Opera 有很大不同。仅因为在一个 WebKit 中可行，并不意味着在另一个 WebKit 中也一定可行。 - Crystal Miller
14

虽然这与标题不太相关，但我认为将其附加在此处是合适的。

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

将 position：absolute 添加到svg标签中修复了我的问题，并且在iOS和其他所有地方都能正确渲染（父元素已经定位，因此这并未改变svg的实际位置）。 其他定位样式也可能有效。

1
我曾经遇到过类似的问题。我的问题很简单，只需在SVG的父级和容器中添加“position: relative”即可解决。 - Urb Gim Tam
1
问题在于父元素区域缺乏定位上下文。大多数浏览器通常默认级联定位上下文，但似乎iOS不会，至少对于SVG而言是如此。只要您为其父元素提供一些上下文（无论是'relative'、'absolute'还是'static'），它就会认识到其上下文的尺寸-然后它就可以正确地与父元素的100%相关联了。有关CSS定位的更多信息，请参见：http://alistapart.com/article/css-positioning-101 - Urb Gim Tam
5

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

2

我也遇到了在IOS浏览器中显示大型SVG（尺寸）的问题。通过缩小它的比例，我得以让它正常工作。

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

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

1

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

将SVG标记包含在HTML文档中是HTML5解析器的新功能。如果您下载并运行Mac OS X或Windows的WebKit每夜构建版本，则会发现您的测试用例按预期工作。

iPhone不是应该完全支持HTML5吗？还是本地SVG处理不是HTML5标准的一部分？ - Nathan Wheeler
@md5sum：HTML5目前仍然是一项草案规范（据说将在2014年完成），因此“符合HTML5标准”是一个宽泛的术语。移动Safari浏览器支持HTML5的某些功能，但不支持其他功能。内联SVG是HTML5草案规范的一部分，但尚未包含在移动Safari浏览器中。目前已包含在规范中的示例是HTML5音频和视频标签。 - jbeard4
0

你尝试将它嵌入到 <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>

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

0

即使在此页面上提供的所有其他建议下，我仍无法使其工作（甚至在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格式，而星巴克的Logo则是image/svg+xml格式。

解决方法是通过添加以下内容更改头部：

addtype image/svg+xml .svg

到 .htaccess 文件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接