css - SVG <view> bug in macOS Safari -
i'm trying create svg sprite can used both bg , inline svg via .
the following svg works:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <!-- symbols: used inline svgs via <use> --> <symbol id="tsg-en-logo" viewbox="0 0 100 11.1"> <path fill="#0ca8d0" d="m0,2h1..."/> </symbol> <symbol id="chevron-down" viewbox="0 0 200 123.9"> <g fill="#0ca8d0"> <path d="m49..."/> </g> </symbol> <!-- views: used bg images --> <view xmlns="http://www.w3.org/2000/svg" id="tsg-en-logo-bg" width="100" height="11.1" viewbox="0 0 100 11.1"/> <view xmlns="http://www.w3.org/2000/svg" id="chevron-down-bg" width="200" height="123.9" viewbox="0 12 200 123.9"/> <!-- uses: shown when acceses directly on browser --> <use xlink:href="#tsg-en-logo" x="0" y="0" width="100" height="11.1" id="u-tsg-en-logo"></use> <use xlink:href="#chevron-down" x="0" y="12" width="200" height="123.9" id="u-chevron-down"></use> </svg>
the problem when used bg, macos safari looses proportions.
see full svg here: https://cdn.rawgit.com/42pe/7a3a0193d3a142e7d93601340e6ee8fc/raw/81a7b0598b7179bdc071bba87569d53e2a7651e7/test.svg
and working fiddle: https://jsfiddle.net/42pe/lragjqef/1/
any idea why or how fix? works fine on chrome, firefox, ie11 , edge!
Comments
Post a Comment