reactjs - SVG sprite 图像未使用 React 在 iOS 和 Safari 上显示

Question

我正在尝试将我的 svg 图像与 sprite 文件一起使用。在相关组件中导入 sprite 文件并使用自定义 Svg 组件来渲染具有符号 id 的图像。在 css 类中描述的 Svg 图像尺寸。在 Firefox 和 Chrome 中一切正常，但移动和桌面 Safari 不呈现图像。根据建议，在 svg 标签上尝试了 xmlns:xlink、width、height、viewBox 属性。没有任何效果。

在源代码中，我可以看到 SVG 存在并且它在页面中占用空间。但它是空白的。

我很感激任何建议。

这是我的精灵文件内容：

<svg>
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8.586" id="icon-angle-left">
    <g>
      <g fill="none">
        <path d="M0 0H6.981V3.491H0z" transform="translate(0.472 0.707) translate(3.821 3) rotate(90) translate(-2.809 0.331)"></path>
        <path stroke="#555" stroke-linecap="round" d="M2577 1784.713l3.586 3.586 3.586-3.586" transform="translate(0.472 0.707) translate(3.821 3) rotate(90) translate(-2579.998 -1784.713)"></path>
      </g>
    </g>
  </symbol>
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" id="icon-home">
    <path fill="none" d="M0 0h21v21H0z"></path>
    <path fill="#555" d="M10.75 5.354l4.375 3.938v6.834h-1.75v-5.25h-5.25v5.25h-1.75V9.291l4.375-3.937m0-2.354L2 10.875h2.625v7h5.25v-5.25h1.75v5.25h5.25v-7H19.5z" transform="translate(-0.25 -0.375)"></path>
  </symbol>
</svg>

这是我的 Svg 组件：

import React from 'react';
import './style.scss'; 

const Svg = ({ symbolId, className }) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" className={className}>
      <use xlinkHref={symbolId}></use>
    </svg>
  );
};

导出默认 Svg；

并像这样使用它；

import React from 'react';
import sprite from 'sprites/product-list.svg';
import Svg from 'shared/Svg';

const MyComponent = () => {
  return (
    <div>
      <Svg className="image" symbolId={sprite + "#icon-home"} />
    </div>
  );
};

export default MyComponent;

标签： reactjssvg