1. 首頁
  2. 問答
  3. Mobile Safari SVG問題

Mobile Safari SVG問題

2010-12-21 87 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

相關問題

 相關問題