时间戳

首页 > 解决方案 > SVG 不在 IOS 上渲染（渲染空白空间）

javascript - SVG 不在 IOS 上渲染（渲染空白空间）

问题描述

我在不同时间在浏览器堆栈和同一 IOS 或 MacOs 设备上检查我的网站 SVG 可以工作或可以渲染空白空间

//SVG使用

<svg>
   <use xlinkHref={`#${id}`} />
</svg>

//SVG

<svg
    onClick={onClick}
    className="top-controls-panel__icon top-controls-panel__icon--points"
    x="0px"
    y="0px"
    viewBox="0 0 47.1 12.1"
    xmlSpace="preserve"
    data-ieadjustwidth="40%"
>
    <path d="M0.4,6.1c0,3.1,2.5,5.6,5.6,5.6s5.6-2.5,5.6-5.6S9.1,0.5,6,0.5S0.4,3,0.4,6.1" />
    <path d="M17.4,6.1c0,3.1,2.5,5.6,5.6,5.6s5.6-2.5,5.6-5.6c0,0,0,0,0,0c0-3.1-2.5-5.6-5.6-5.6S17.4,3,17.4,6.1L17.4,6.1" />
    <path d="M35.4,6.1c0,3.1,2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6S44.1,0.5,41,0.5C37.9,0.5,35.4,3,35.4,6.1L35.4,6.1" />
</svg>

我使用 JavaScript 和 React，有时在 IOS 或 MacOS 上会呈现空白区域而不是 svg。

我在 browserStack 服务上没有苹果设备和测试站点

在其他问题中，我发现 SVG 的大小会影响 SVG 不渲染，但我不明白应该如何计算这些大小，如果 CSS 中以百分比表示大小？

我也将 <use href... 更改为 <use xlinkHref... 这对我不起作用。现在我不会尝试使用

img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'"

而不是 SVG，或者我应该使用其他变体？

标签： javascriptiosreactjssvg

解决方案

推荐阅读