如何让响应式SVG在Safari中正常显示并正确缩放？

针对你遇到的Safari无法正确渲染未设置width/height的响应式SVG问题，可通过以下步骤解决：

核心修复思路 #

Safari对未指定明确基础尺寸的SVG存在渲染兼容问题，即使使用width="auto"/height="auto"也无法触发正确的比例计算。我们需要给SVG设置与viewBox匹配的基础尺寸，再通过CSS强制实现响应式缩放。

具体实现步骤 #

1. 添加SVG基础尺寸属性
   在<svg>标签中补充width="191"和height="6"（与你的viewBox="0 0 191 6"数值对应），让Safari能识别SVG的固有宽高比。

2. 用CSS实现响应式控制
   通过CSS将SVG宽度设为100%，高度自动适配，确保它能随容器自动缩放：

   svg {
     width: 100%;
     height: auto;
     display: block; /* 可选：消除SVG底部默认空白间隙 */
   }
   

3. 保留原有比例控制属性
   继续保留viewBox和preserveAspectRatio属性，保证SVG缩放时不会变形。

修改后的完整代码 #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 191 6" preserveAspectRatio="xMinYMid meet" width="191" height="6">
 <path d="M0.113249 3L3 5.88675L5.88675 3L3 0.113249L0.113249 3ZM3 3.5H190.5V2.5H3V3.5Z" fill="url(#paint0_linear_prev_<?php echo $i; ?>)" />
  <defs>
   <linearGradient id="paint0_linear_prev_<?php echo $i; ?>" x1="3" 
    y1="3" x2="190.5" y2="3" gradientUnits="userSpaceOnUse"> <stop stop-color="white" />
    <stop offset="1" stop-color="white" stop-opacity="0" />
   </linearGradient>
  </defs>
</svg>

svg {
  width: 100%;
  height: auto;
  display: block;
}

补充说明 #

• 若SVG嵌入在HTML中使用，需确保上述CSS能作用到目标SVG元素
• display: block用于消除部分浏览器中SVG底部的默认空白，可根据实际场景选择是否添加

内容的提问来源于stack exchange，提问作者Luiz Faustino