自定义React SVG组件桌面端渲染正常iOS及Safari无法显示求助

核心是Webkit内核（Safari、iOS端所有浏览器均基于Webkit开发）对SVG格式规范要求更严格，你的代码存在两处不符合规范的写法，Chromium内核做了容错所以能正常渲染，Webkit内核直接解析失败：

• viewBox属性仅接收4个无单位的数字值，你传入的width、height带px后缀，生成的viewBox="0 0 300px 50px"不符合规范，Webkit无法正常解析SVG可视区域
• 外层<svg>标签未显式设置宽高属性，部分版本Webkit会默认将SVG尺寸设为0*0，导致内容不可见

调整组件代码，处理宽高的单位，给svg标签补全宽高属性即可：

import React from 'react'

const Svg = (props) => {
    // 提取宽高的纯数值供viewBox使用
    const widthVal = parseInt(props.width, 10)
    const heightVal = parseInt(props.height, 10)

    return(
        <svg
            // 显式设置SVG渲染尺寸
            width={props.width}
            height={props.height}
            // viewBox使用无单位数值
            viewBox={`0 0 ${widthVal} ${heightVal}`}
        >
            <defs>
                <path
                    id='path-main'
                    d={`M 0 0 L ${widthVal} 0 L ${widthVal} ${heightVal} L 0 ${heightVal} Z`}
                />
            </defs>
            <g>
                <use
                    // 优先用href兼容新规范，同时保留xlinkHref兼容老版本Webkit
                    href='#path-main'
                    xlinkHref='#path-main'
                    stroke='blue'
                    strokeWidth='2'
                    fill='blue'
                />
            </g>
        </svg>
    )
}

export default Svg

原有组件调用方式无需修改即可正常在所有平台渲染。

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