如何从路径中放大和 SVG 而不是添加宽度和高度？答案

【问题标题】：How to scale up and SVG from with in path instead of adding width and height?如何从路径中放大和 SVG 而不是添加宽度和高度？
【发布时间】：2022-01-23 07:24:53
【问题描述】：

我在下面的代码中有这个图标，这个图标的问题是它有一个很大的边距，在我的情况下，我希望它的边距变小，或者图标大一点，，而不是增加一般大小，因为您将在代码中看到当前的实现。任何想法如何实现这一点我尝试了一些解决方案，但没有一个奏效。

import { ReactComponent as icon } from '../../Img/icon.svg';

// style 
const iconStyle = {
  padding: 0,
  marginTop: -5,
  backgroundColor: '#ef6c00',
  fill: 'white',
};

// inside the component
<icon style={iconStyle} width='24' height='24' />

【问题讨论】：

假设 icon.svg 在其根元素上有一个 viewBox，调整 viewBox 值。
@RobertLongson 它有，但它切断了图标的一侧
@RobertLongson 在 viewBox 中以任何方式放大
是的，根据我的第一条评论更改 viewBox 值。由于您没有提供 icon.svg 的标记，因此很难进一步评论。

标签： javascript reactjs material-ui

【解决方案1】：

您可以在编辑器中打开 svg 并直接编辑 svg 标签。例如这里是圆形 svg：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />  
</svg>

【讨论】：