svg图像不适用于safari 5.1.7（windows）

Question

svg图像在safari 5.1.7（windows）中不起作用。但是当我在safari中打开svg图像然后访问该网站时，图像会显示在那里。

Answer 1

Windows上的Safari已知存在计算响应内联SVG高度的问题。

您可以尝试使用intrinsic ratio技术，将<svg>标记绝对放在<object>标记内，其底部填充等于viewBox（或高度）的比率/ svg。的宽度属性。

.my-responsive-svg {
  width: 100%;
  display: block;
  height: auto;
  position: relative;
  /* for an svg with a 16:9 aspect ratio */
  padding-top: 56.25%;
}

.my-responsive-svg svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

<object class="my-responsive-svg">
  <svg width="160" height="90" viewBox="0 0 160 90">
    <rect x="10" y="10" width="140" height="70" />
  </svg>
</object>

消息来源：向SérgioLopes发表评论，他对this blog post发表了评论。