1. 首页
  2. 问答
  3. Mobile Safari SVG问题

Mobile Safari SVG问题

2010-12-21 97 views
29

我试图让我的iPhone（或iPad）默认浏览器显示SVG图像，但我似乎无法得到即使只是一个矩形显示。Mobile Safari 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>

来源

2010-12-21 Nathan Wheeler

回答

35

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

来源

2010-12-22 18:49:02 Wayne

+0

其实，事情是这样的工作原理上除了iPad/iPhone的一切，据我可以告诉。我插入了RaphaelJS，现在它也在iOS上工作。我也尝试过xmlns和version属性，结果相同，除了iOS以外的其他地方都可以使用。 – 2010-12-29 16:38:37

+0

它在使用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 2010-12-29 17:05:26

+0

我知道理论上它应该可以在任何webkit浏览器中工作，如果它在一个工作。它只是没有。我在我的主域名的另一个页面中切换了所有内容，以测试您呈现的所有不同选项，但都无效。似乎工作的唯一的东西是通过JavaScript后加载生成它。我已经离开原来的页面，以便它仍然符合原始问题。 – 2011-01-03 17:32:33

1

混合HTML标签SVG标签不使用结构良好的XHTML文件和命名空间（见韦恩的回答）在Safari不支持的iOS 4.2.1及更早版本，也不是在Safari 5.0.x的支持并在Mac OS X和Windows上更早。

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

来源

2011-01-07 17:20:20 ddkilzer

5

I H大街上也有移动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中（如果需要）。

来源

2011-10-02 21:10:19 asgeo1

0

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

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

我想这应该做的伎俩！

来源

2013-12-31 06:42:10

7

想象一下，我会在这里讨论这个问题，虽然它大部分只是与标题有关。

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

向svg标签添加一个position: absolute解决了我的问题，它在iOS和其他地方正确渲染（父元素已经定位，所以这并没有改变svg的实际位置）。其他位置样式也可能起作用。

来源

2014-05-27 17:57:18

0

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

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

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

，并复制该文件到我自己的网站。仍然没有运气，所以我必须看看这个文件，我自己使用雷克斯Swain的HTTP浏览器：

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

的差异变得越来越明显。 我的svg被当作text/html，并且星巴克标志被作为image/svg + xml提供。

的解决方案是通过添加改变标头：

addtype image/svg+xml .svg

到.htaccess文件。

来源

2014-07-18 08:36:12

 相关问题

  • 暂无相关问题^_^