イメージ内のSvgがサファリに表示されない

Question

私のウェブサイトの中で、私はいくつかのSvgを埋め込みます。 Chrome、Firefox、IE（9+）、Safariでうまく動作しているようです。サヴァリはイメージにイメージが含まれるとすぐにイメージをレンダリングしません。

前回同様のトピックに基づいて、私は次のことを試してみました：

SVG <image> elements not displaying in Safari - この<use></use>

SVG Image dosen't appear in Safariのようなタグ

<use> 

を囲んで - 私はこの非常に便利を見つけるいけない、これは原因svgのaprtを削除します。

Not able to render SVG image in Safari

- ヘッダに

<meta http-equiv="Content-Type" content="application/xhtml+xml">を追加しました。

それを超えて、私は本当に他に何を試していいのかわかりません。私のページの中に画像は表示されませんが、Safari（ファイルのみ）にsvgファイルを開くことができ、正しくレンダリングされることに注意してください。さらに、ブラウザでファイルとして開いた後でも、ページ内にレンダリングされます。そして私はimgタグでページにsvgを埋め込みました。

<img src="mysvg.svg" class="center-block"/> 

これは私のSVGです：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve"> 
<g> 
    <defs> 
     <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414  "/> 
    </defs> 
    <clipPath id="SVGID_2_"> 
     <use xlink:href="#SVGID_1_" overflow="visible"></use> 
    </clipPath> 
    <g id="DSC_x5F_0112-2.psd" clip-path="url(#SVGID_2_)"> 
     <g id="DSC_x5F_0112-2.psd_1_" enable-background="new "> 

       <image overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov 
.....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei 
r/fdeaS//9k=" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)"> 
      </image> 
     </g> 
    </g> 
</g> 
<g> 
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585 
     L164,1.415L1.414,164.002z"/> 
</g> 
</svg> 

私はコードを短くするbase64で画像列を、減少しています。完全なsvgはhereです。

更新：ちょうど明らかに、svgはブラウザ（サファリ）に表示されますが、画像が欠落しています（私は境界線が見えます）。

Answer 1

この質問からの回答がうまくいくようです：What could make Safari skip clip-path AND mask with SVG?。答えのリンクを参照してください。

クリップパスを再現して見えるようにする必要があります。 </image>タグの後に</clippath>タグがプッシュされません。

ここ

が少し変更されたコード（あなたはそれを変更する必要がありますので、挿入された私のイメージへのリンク）です：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve" > 
<g> 
    <clipPath id="SVGID_2_"> 
     <!--use xlink:href="#SVGID_1_" overflow="visible"></use--> 
     <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414" /> 
    </clipPath> 

    <defs> 
     <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414"/> 
    </defs> 
</g> 

<image clip-path='url(#SVGID_2_)' overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="images/banner_03.jpg" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)"> 
</image> 

<g> 
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585 
     L164,1.415L1.414,164.002z"/> 
</g> 
</svg> 

Answer 2

のでANTOJurkovićはSafariとクリップ経路といくつかの既知の問題があり、指摘しました。サファリが好きなのは、ポリゴンを定義しないで、clippPathにまっすぐ入れるということです。また、clipPathを別々にグループ化する必要があります。

しかし、svg-<img src="svg"/>にimgタグを使用しても、イメージをレンダリングすることができませんでした。私はこれが（ - 最新バージョンをiPadやiPhone、窓のサファリとMacのSafari上）モバイルサファリで正しくレンダリングすることを確認することができます

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve"> 
<g> 
    <clipPath id="SVGID_2_"> 
     <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414  "/> 
    </clipPath> 
</g> 
<image clip-path="url(#SVGID_2_)" overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/.....r/fdeaS//9k="> 
</image> 
<g> 
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585 
     L164,1.415L1.414,164.002z"/> 
</g> 
</svg> 

：だから最後に私はこのようにそれを埋め込まれています。

私はこのsvgsを別々のhtmlファイルに入れて、必要なときにレンダリングします。

Answer 3

This solution Safariに埋め込みSVGイメージを表示するときに機能します。

<object data="image.svg" type="image/svg+xml"></object>

Answer 4

と

<img src="image.svg">

を置き換える私はページにSVGのspritesheetをロードするためのAjaxを使用していたこの問題に遭遇しました。スプライトシートがロードされる前にページ上に「a」が表示されていれば、スプライトシートが使用可能になったらエラーになり、解決しません。 spritesheetがロードされた後にDOMに追加されたものは正常でした。スプライトシートの読み込みが完了するまで、アイテムをDOMに配置するのをやめなければなりませんでした。

これはIOSにのみ影響します。他のすべてのブラウザは注文を気にしませんでした。

Answer 5

このWebKitのバグが問題に責任があるように見えます：私たちは私たちのアプリケーションで使用https://bugs.webkit.org/show_bug.cgi?id=99677

この問題を回避するには、SVG画像を表示すべてimgの要素を見つけたスクリプトを持っており、同じSVGsをロード隠しobject要素を追加することです（<object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object>）。

objectタグは、imgタグを使用してロードされたSVG内で表示されるように埋め込み画像を画像キャッシュに適切に読み込むためです。

imgタグを使用してイメージが表示されるため、アプリケーション/ Webサイトの他の部分に影響を与えずに回避策を適用することができます。

欠点は、SVGイメージごとに余分なobjectタグを作成することです。