ChromeおよびSafariの背景が透明なSVG

こんにちは親愛なる読者。 svg形式を使用した経験のある人は、それ以外のこと、そして最も重要なこととして、Webkitブラウザーに現れる非常に古いバグを知っています。 バグの本質は、オブジェクトタグを介して透明な背景を持つsvg画像を挿入すると、safariとchromeがそれを白色で塗りつぶすことです- 例です。



インターネットで最初に出会った解決策は、javascriptを使用してブラウザーを定義し、webkitブラウザーのオブジェクトタグをimgタグで置き換えることでした。 2番目の解決策は、inline-svgを使用することになりましたが、このためには、ページ自体が有効なxhtmlドキュメントである必要があります。これはIEの好みではありません。

偶然にも、3番目の解決策が見つかりました。 非常に基本的なため、誰もまだ試していないのは驚くべきことです（これに間違えた場合はお知らせください）。 svgファイルの<svg>タグの後に次の行を書き込むだけで十分です。

< style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .

1. < style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
2. < style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
3. < style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .
   
   
   
   

< style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .

そして、魔法が起こります。 ここに実例へのリンクがあります。 おかげで、それだけです。

更新しました。

クロムでは、少なくとも8番目のバージョンから、バグはすでに修正されていることが判明しました。 Safariは引き続き関連しています。 7番目のクロムをチェックインしてください。