將 SVG 樣式化為 React 組件

Question

按照 create-react-app 文檔，我導入了 svg 作為反應組件。

但是，我似乎無法正確調整大小或 position，無論是內聯還是通過 css。

我想將 SVG 組件縮放到與我的其他 100 像素 x 100 像素圖標相同的大小，然后在屏幕底部中心縮放 position。

我嘗試為 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;
}

這是重現它的最少代碼。 如果需要， 沙盒中的完整代碼。

...
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周圍只有額外的空間。 我很快為你注視了一個新的視圖框。 嘗試這個：

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

這是一個帶有更改的分叉項目。

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

這些值似乎工作得很好，如果您需要使用通常很好的十進制值（例如9.5 ），您可以對它們進行更多調整。

Answer 2

它與 React 無關。 SVG 圖像具有來自viewBox的預定義width和height ，因此不會隨width / height屬性縮放。 您可以在此處閱讀有關 SVG 圖像如何工作的更多信息。

您的兩個選項是在圖像上使用transform: scale(X) ，這有點麻煩，或者您可以查看此問題以了解如何正確更改 SVG 圖像viewBox 。 這是比轉換圖像更好的選擇，但我提供了兩個示例以了解您為什么遇到width / height問題。