Javascript 将SVG设置为React组件

在创建react应用程序文档之后，I

然而，无论是内联的还是通过css，我似乎无法正确地调整它的大小或位置

我想将SVG组件缩放到与我的另一个图标100px乘以100px相同的大小，然后定位在屏幕的底部中心

我尝试为svg组件设置宽度和高度道具

和css

.bubbleBin{
显示器：flex；
位置：绝对位置；
指针事件：无；
对齐项目：居中；
自对准：居中；
证明内容：柔性端；
}

下面是复制它的最小代码。如果需要，请输入完整代码

。。。
从“./assets/icon_close.svg”导入{ReactComponent as IconClose}；
函数App（）{
常数图标宽度=100；
const ICON_HEIGHT=100；
返回(
);
}

我希望svg与我的cat图标大小相同，但这是结果

---

谢谢。

您的SVG的

视图框周围有额外的空间。我很快为你找到了一个新的可视框。试试这个：

<IconClose
  className="bubbleBin"
  alt="close bubble"
  height="100px"
  width="100px"
  viewBox="9 9 26 26"
/>



这是一个有变化的分叉项目


这些值似乎工作得很好，如果需要使用通常很好的十进制值（例如
9.5
），您可以对它们进行更多的调整。
这与React无关。SVG图像具有来自
视图框
的预定义的
宽度
和
高度
，因此不会随
宽度
/
高度
属性进行缩放。您可以阅读更多关于SVG图像如何工作的信息

您的两个选项是在图像上使用
transform:scale（X）
，这有点像黑客，或者您可以查看如何正确更改SVG图像
viewBox
。这是一个比变换图像好得多的选项，但我提供了两个示例，以了解为什么您在
宽度
/
高度
方面存在问题，它现在大小相同，但我很难理解您是如何得出这些视口编号的。MDN声明它们的属性是min-x、min-y、width和height。