16

ドキュメントに直接埋め込まれた線形グラデーションを含むSVGオブジェクトがあります。ChromeとFirefoxでは正常に動作しますが、Safariでは何もレンダリングされません。SVGをファイルとして作成し、Objectタグを使用して埋め込むと、Safariで正常に機能します。他の形状や塗りつぶしは機能しますが、機能しないのは線形グラデーションです。オブジェクトを使用できると思いますが、SVGを直接埋め込むことをお勧めします。

ここでデモを作成しました（SafariではなくChromeで動作します）：http：//jsfiddle.net/sjKbN/

コンテンツタイプをに設定することを提案するこの回答に出くわしましapplication/xhtml+xmlたが、これ自体が他の問題を引き起こしているようです。

誰かがこれを機能させるための他の修正やアイデアに出くわしたかどうか疑問に思っています。

4

5 に答える 5

31

グラデーションをSafariでラップすると、グラデーションが機能しますdefs。

<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="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
 <defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.6665" y1="149.5" x2="293.333" y2="149.5">
    <stop  offset="0" style="stop-color:#FFF33B"/>
    <stop  offset="0.0595" style="stop-color:#FFE029"/>
    <stop  offset="0.1303" style="stop-color:#FFD218"/>
    <stop  offset="0.2032" style="stop-color:#FEC90F"/>
    <stop  offset="0.2809" style="stop-color:#FDC70C"/>
    <stop  offset="0.6685" style="stop-color:#F3903F"/>
    <stop  offset="0.8876" style="stop-color:#ED683C"/>
    <stop  offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
</defs>
<rect x="5.667" y="5.333" fill="url(#SVGID_1_)" width="287.667" height="288.333"/>
</svg>

参照をラップすることは推奨されているようですが、仕様によるとdefs必須ではありません。つまり、これはSafariのバグです。

于 2012-07-03T12:04:39.273 に答える
23

アルファについて：Safari（現時点では7）はSVGカラーアルファチャネルをカバーしていないようです。不透明度の停止属性を使用してください。それはうまくいきます！

<stop stop-color="rgba(x,y,z,0.5)"> //safari does not work
<stop stop-color="rgb(x,y,z)" stop-opacity="0.5"> //ok
于 2014-10-06T16:43:56.663 に答える
16

受け入れられた答えは私にとって解決策ではありませんでした。

私の問題は<base href="/" />、インデックスファイルにタグが存在することでした。それを削除するだけで問題は解決しました。

削除できない場合は、おそらくいくつかの回避策がすでに存在します。この要点は見つかりましたが、テストしていません。

アップデート

hrefを削除するだけで、Angularアプリの子ルーティングが壊れました。適切な回避策は、linearGradientIDの前にページの相対位置を追加することです。ロジックを次のようなメソッドでラップしました。

get svgFill(): string {
  return `url(${this.location.path()}#${this.gradientId}) white`;
}
于 2018-12-02T11:50:33.733 に答える
1

答えは簡単です。すべてのIDは（だけでなく<linear gradient>）すべてのSVGファイルに対して一意である必要があります。

于 2021-07-28T13:38:13.590 に答える
0

線形グラデーションでインラインSVGを作成するのにも問題がありました。デザイナーは-のIDにを入れていました<linearGradient。解決策はそれを削除するのと同じくらい簡単でした。

<linearGradient id="linear-gradient">
...
<path fill="url(#linear-gradient)" d="..."/>

と

<linearGradient id="lineargradient">
...
<path fill="url(#lineargradient)" d="..."/>
于 2020-12-24T00:22:58.883 に答える