Fatal编程技术网
  • iphone/
  • Iphone mobilesafarisvg问题

Iphone mobilesafarisvg问题

iphone svg

Iphone mobilesafarisvg问题,iphone,svg,mobile-safari,Iphone,Svg,Mobile Safari,我试图在我的iPhone（或iPad）默认浏览器上显示一个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"> <he

我试图在我的iPhone（或iPad）默认浏览器上显示一个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>
    <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 iPhone测试
添加
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>
也可以使用；这就是Ipad svg示例中显示的内容。当文档以XML而不是HTML形式交付时，它应该以
开头

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

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

我以前在使用mobile 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);
);

$（文档）.ready（函数（）{
var svg=''；
var chart=document.adoptNode（$（'svg'，$.parseXML（svg））.get（0））；
$（'body'）.html（图表）；
);
这只是一个例子——显然，在实践中，您不会将SVG存储在那样的字符串中

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

您是否尝试将其嵌入
标记中

<object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>
e、 g
我想这应该可以了！

我想我会在这里加上这个，尽管它主要与标题有关

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

在svg标签中添加一个
位置：绝对
，修复了我的问题，它在iOS和其他任何地方都能正确呈现（父元素已经定位，所以这并没有改变svg的实际位置）。其他位置样式也可以工作。

即使有此页面上的所有其他建议，我也无法让它工作（即使是在狩猎中）

因此，我在以下网站上找到了一个工作示例：

并将该文件复制到我自己的站点。仍然不走运，因此我使用Rex Swain的HTTP查看器查看了该文件和我自己的文件：

差别变得明显。我的svg被用作text/html，星巴克的标识被用作image/svg+xml

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

addtype image/svg+xml .svg
到.htaccess文件。

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

我想1000像素及以下就可以了。。 我的一个朋友告诉我，它可能与IOS的整数限制有关

事实上，就我所知，它在除iPad/iPhone之外的所有设备上都能正常工作。我插入了RaphaelJS，现在它也能在iOS上正常工作。我也尝试了xmlns和版本属性，同样的结果，除了iOS之外，它在任何地方都能正常工作。它在使用webkit引擎的Chrome中进行渲染（所以iPad应该渲染，我还没有）：但目前不适用于firefox 3.6.13…这可能是因为内容类型为“content-type:text/html”…在严格的xml规则下，需要定义xmlns。虽然firefox 3.6.13没有应用严格的xml规则，但不幸的是，firefox 3.6.13仍然没有呈现内联svg…通过在Internet Explorer中使用它，我知道理论上它应该在任何webkit浏览器中工作，如果它在一个浏览器中工作的话。它就是不工作。我已经在ano中切换了所有内容在我的主域上的另一个页面上测试你提供的所有不同选项，但都不起作用。唯一起作用的似乎是通过JavaScript生成post load。我将原始页面单独放置，以便它仍然与原始问题匹配。即使使用JS post load，我也无法将其加载到iPhone上。有任何线索吗？独立页面“bit似乎非常重要：我的svg源图像在iPad 1上使用jQuery更改
src
属性时会被压扁。添加“独立”解决了这一问题。难道iPhone不应该完全兼容HTML5，或者原生svg处理不是HTML5标准的一部分吗？@md5sum:HTML5仍然是一个草案规范吗？”在这一点上，ion（显然将于2014年完成）是“兼容HTML5的”是一个松散的术语。移动safari浏览器支持HTML5的某些功能，但不支持其他功能。内联SVG是HTML5草案规范的一部分，但尚未包含在移动safari浏览器中。当前包含的规范部分示例包括HTML5音频和视频标记。我与您的问题类似。我的问题只是解决了ved为svg的父级和容器添加了一个“位置：相对”。问题是缺少父级区域的定位上下文。大多数浏览器倾向于将定位上下文级联为默认值，但iOS似乎没有，至少对于svg是这样。只要给其父级一些上下文（无论是“相对”、“绝对”还是“静态”），然后它确认其上下文的维度是什么，然后它可以正确地与100%的父级关联。更多关于css定位的信息，请参阅以下示例，了解如何开始使用SVG：以下是一些简单示例，说明如何在XHTML中包含内联SVG内容： 
<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>

addtype image/svg+xml .svg