javascript - SVG is not render on IOS (render empty space)

Question

I check my site in browserstack and on same IOS or MacOs device in different times SVG can work or can render empty space

//SVG USAGE

<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>

I use JavaScript and React, problem that sometimes on IOS or MacOS an empty space is rendered instead of svg.

I dont have apple device and testing site on browserStack service

In other questions I found that size of SVG can influence for that SVG is not render, but I dont undestand how that sizes should calculate, if sizes indicated in CSS in percent?

Also I change <use href... to <use xlinkHref... it is not work for me. Now I won't try use

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

instead of SVG, or I should use another variant?

Answer 1

等待大神答复