Question

我正在尝试创建一个SVG精灵，既可以用作bg也可以用作内联svg via。

以下SVG主要起作用：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <!-- symbols: used for 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 for 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 the 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>

问题在于，当用作BG时，macOS Safari会失去比例。

在此处查看完整的SVG：https://cdn.rawgit.com/42pe/7a3a0193d3a142e7d93601340e6ee8fc/raw/81a7b0598b7179bdc071bba87569d53e2a7651e7/test.svg

工作小提琴：https://jsfiddle.net/42pe/Lragjqef/1/

知道为什么或如何修复？这适用于Chrome，Firefox，IE11和Edge！

macOS Safari

0 个答案: