SVG with transparent background in Chrome and Safari
Hello dear readers. Those of you who have ever worked with the svg format know otherwise and, most importantly, an extremely old bug that manifests itself in webkit browsers. The essence of the bug is that if you insert a svg-image with a transparent background through the object tag, then safari and chrome will fill it with white color - an example .
The first solution I met on the Internet was to define the browser via javascript, and to replace the object tag with the img tag for webkit browsers, because when inserting svg via img, the transparent background is displayed correctly. The second solution was to use inline-svg, but for this the page itself must be a correct xhtml document, which IE doesn’t like.
Quite by chance, a third solution was found. So elementary that it is surprising that no one has yet tried it (if I am mistaken about this, please inform me). It is enough to write the following lines in the svg file after the <svg> tag:
And then magic happens. Here is a link to a working example . Thank you, that's all.
It turned out that in chrome, starting at least with the 8th version, the bug has already been fixed. For safari is still relevant. Someone check in the seventh chrome please.
The first solution I met on the Internet was to define the browser via javascript, and to replace the object tag with the img tag for webkit browsers, because when inserting svg via img, the transparent background is displayed correctly. The second solution was to use inline-svg, but for this the page itself must be a correct xhtml document, which IE doesn’t like.
Quite by chance, a third solution was found. So elementary that it is surprising that no one has yet tried it (if I am mistaken about this, please inform me). It is enough to write the following lines in the svg file after the <svg> tag:
< 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 .< 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 .< style > svg { -webkit-background-clip: text; } </ style > * This source code was highlighted with Source Code Highlighter .
And then magic happens. Here is a link to a working example . Thank you, that's all.
Upd.
It turned out that in chrome, starting at least with the 8th version, the bug has already been fixed. For safari is still relevant. Someone check in the seventh chrome please.
')
Source: https://habr.com/ru/post/110367/
All Articles