javascript - 将 SVG 样式化为 React 组件

Question

按照 create-react-app 文档，我 imported a svg as a react component .

但是，我似乎无法调整大小或正确定位它，无论是内联还是通过 css。

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

我尝试为 svg 组件设置宽度和高度属性。

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

在 CSS 中。

.bubbleBin {
  display: flex;
  position: absolute;
  pointer-events: none;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
}

这是重现它的最少代码。完整代码在 Sandbox如果需要的话。

...
import { ReactComponent as IconClose } from './assets/icon_close.svg';

function App() {
  const ICON_WIDTH = 100;
  const ICON_HEIGHT = 100;

  return (
    <div style={{ display: 'flex' }}>
       <img
         src={require('./assets/cat_icon.png')}
         width={String(ICON_WIDTH)}
         height={String(ICON_HEIGHT)}
         alt="cat icon"
         draggable={false}
       />
      <IconClose
        className="bubbleBin"
        alt="close bubble"
        height="100px"
        width="100px"
      />
    </div>
  );
}

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

谢谢。

Answer 1

您的 SVG 的 viewBox 周围只有额外的空间。我很快就为你找到了一个新的 View 框。试试这个:

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

这是一个带有更改的 fork 元素。

https://codesandbox.io/s/issue-styling-svg-component-8wwtw

这些值似乎工作得很好，如果您需要使用通常没问题的十进制值(例如 9.5)，您可以稍微调整它们。