続・iPhoneで見ると、<symbol>で作った絵が見えない?

d:id:myamyugon:20130819:1376838056

で「もっと調べる」と書いた件。
わかった。インラインSVGで書いていたのが原因。
インラインSVGだとけっこうブラウザごとに対応の差がありそうだ。

<!doctype html>
<html lang="ja">
  <head>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      version="1.1"
      viewBox="0 0 480 320"
    >
      <defs>
        <symbol id="hoge">

        </symbol>
      </defs>
      <use xlink:href="#hoge" x="100" y="100" />
    </svg>

  </body>
</html>

この場合、iOS safariではsymbol→useした絵が表示されない。
SVGを別ファイルにして、img要素で参照した場合は表示された。

しかし!!!

img要素で参照した場合、svgファイル内でimageで参照している画像が表示されない!><
まじかーーーー!!!

結局svgを使う場合、クロスブラウザをある程度考えるのであれば、object要素で読み込むのが今のところ一番確実かも。

<!doctype html>
<html lang="ja">
  <head>

    <object data="hoge.svg" type="image/svg+xml" 
      width="640" height="427"></object>

  </body>
</html>