React 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) 工作完美。

有人对此有解决方案吗？

原文由 ssuhat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 user8759970 发布，翻译遵循 CC BY-SA 4.0 许可协议