web-dev-qa-db-ja.com

モバイルSafari SVGの問題

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>
iphonesvgmobile-safari
32
Nathan Wheeler

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"で動作します。これを作成するには、ドキュメントを done here のようにHTMLではなくXMLで終了します。

IpadがContent-Typeを気にするかどうかはわかりませんが、他のブラウザは気にします。

Updated

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

使用することもできます。 Ipadのsvgの例に示されているものです。ドキュメントがHTMLではなくXMLとして配信される場合、<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>
40
Wayne

これはほとんどタイトルに関連しているものの、ここでこれに取り組むと考えた。

IOSを除くすべてのブラウザー（IE9 +を含む）ですべてを正しくレンダリングするSVGタグがありました。私はsvgのcssの高さを100％に設定しましたが、これはどこでも機能しましたが、iOSでは親要素だけでなく、ページ全体の高さの100％に見えました！これにより、内部のSVG要素がビューポートの外側にレンダリングされていました。

position: absoluteをsvgタグに追加すると、私の問題が修正され、iOSおよびその他すべてで適切にレンダリングされました（親要素は既に配置されているため、svgの実際の位置は変更されません）。他の位置スタイルも機能します。

7
Aaron Krauss

モバイル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にロードできます。

5
asgeo1

また、IOSブラウザーで大きなSVGS（ディメンション）を表示する際に問題が発生しました。これを縮小することで、機能するようになりました。

私は1000px前後でそれができると思います。私の友人は、おそらくIOSのInteger Limitsに何か関係があると言っていました。

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

2
Steffan

整形式のXHTMLドキュメントと名前空間を使用せずにSVGタグとHTMLタグを混在させる（Wayneの回答を参照）は、Safari for iOS 4.2.1以前ではサポートされず、Safari 5.0.x以前ではMac OS Xおよびウィンドウズ。

HTMLドキュメントにSVGタグを含めることは、HTML5パーサーの新しい機能です。 Mac OS XまたはWindowsで WebKitのナイトリービルド をダウンロードして実行すると、テストケースが期待どおりに機能することがわかります。

1
ddkilzer

<object>タグ内に埋め込もうとしましたか。

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

これでうまくいくと思います！

0
Mohammad Faizan

このページに他のすべてのアドバイスがあっても、（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として提供されていました、およびStarbucksロゴはimage/svg + xmlとして提供されていました。

解決策は、以下を追加してヘッダーを変更することでした：

addtype image/svg+xml .svg

.htaccessファイルに。

0
Andrew Swift