如何在不调整背景大小的情况下调整 SVG 大小

Question

我想使用 SVG 作为我网站的徽标。

我尝试通过修改其宽度和高度来调整它的大小，但它不起作用，因为它调整了整个图像的大小。

我也尝试过这些解决方案：

• 在 HTML 中调整 SVG 大小？
• 如何调整 svg 的大小？
• 如何制作可拉伸而不是平铺的 SVG 背景？

这就是我想要的：

import React from 'react';
import "./Header.css";
import IconSvg from "../../../assests/logo.svg";
// import SvgImage from "../../../utils/logo";
import {NavLink} from 'react-router-dom';

export default function Header() {
  return (
    <div className="header">
      <div className="header-img">
        {/* <img src={IconSvg} alt="icon"/> */}
        {/* <SvgImage/> */}
      </div>
      <div className="header-controlls">
        <div className="header-controlls-controll">
          <NavLink className={"link"} to="/"> Home </NavLink>
        </div>
        <div className="header-controlls-controll">
          <NavLink className={"link"} to="/About">About </NavLink>
        </div>
        <div className="header-controlls-controll">
          <NavLink className={"link"} to="/Orders">Orders </NavLink>
        </div>
        <div className="header-controlls-controll">
          <NavLink className={"link"} to="/Cart">Cart </NavLink>
        </div>
      </div>
    </div>
  )
}

我尝试直接导入 SVG，并通过 React 组件导入，但它们都不起作用，并且调整图像大小会减小整个图像的大小，这对我来说没有好处。

我尝试安装

preserveAspectRatio

、

viewBoxheight

和

width

，但它们都无法满足我的需要。

Answer 1

尝试将 SVG 作为 React 组件导入：

import { ReactComponent as Arrow } from "./assets/arrow.svg";

<Arrow width={50} height={50} />