Question

我在我的反应应用程序中显示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

没有看到您的组件和代码，很难满足您的特定需求。但你试过react-svg吗？您还可以阅读this

Answer 2

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

Answer 3

这就是我所做的

import React from 'react'
import svg from "../assets/img/sprite.svg";

const Header = () => {
  return (
    <div>
      <button class='search__button'>
       <svg class='search__icon'>
         <use xlinkHref={`${svg}#icon-magnifying-glass`} />
       </svg>
      </button>
    </div>
  )
}

export default Header

如何使用纯HTML

<svg class="search__icon">
    <use xlink:href="img/sprite.svg#icon-magnifying-glass" />
</svg>

Answer 4

您可以使用npm "install @svgr/cli --save-dev"。

这可以帮助您基于SVG图标生成反应组件，然后您可以传递fill，height，width作为道具。使用非常简单。

请查看此link，以获得更详细的说明。

反应SVG没有显示

4 个答案: