反应 SVG 未显示

Question

我在 React 应用程序中显示 SVG 时遇到问题。

这是代码：

<svg className="svg-arrow">
    <use xlinkHref="#svg-arrow" />
</svg>

 //styling
.user-quickview .svg-arrow {
    fill: #fff;
    position: absolute;
    top: 12px;
    right: 10px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.svg-arrow {
    width: 4px;
    height: 8px;
    cursor: pointer;
}

在另一个项目中，没有反应，SVG (xlink:href) 完美运行。

有没有人对此有解决方案？

Answer 1

SVG 图像在 React 中显示，无需特殊链接或插件。SVG 无法显示还有另一个原因。如果您绘制 SVG 的画布非常大，而您创建的图像非常小并且位于画布中间，则图像可能不会显示，因为图像周围有太多空白。您需要裁剪画布（视口），使图像靠近画布（视口）边缘。换句话说，去掉空白。使用文本编辑器检查 SVG/XML 以查看视口矩形的设置。您可以使用 Illustrator 或在线 SVG 编辑器工具以可视方式裁剪 SVG 图像。

Answer 2

如果没有看到您的组件和代码，就很难满足您的特定需求。但是你尝试过react-svg吗？
你也可以阅读这个