Html 如何使用CSS更改SVG的高度宽度？

我有一个CRA React应用程序

如何在不保留纵横比的情况下更改SVG的宽度和高度（例如，宽度500px高度10px）

从“../../assets/img/attender.svg”导入装饰；

这将保留纵横比，仅更改大小。我希望它转换为500px的宽度和20px的高度。原来的400px 400px=>500px 20px

---

编辑：例如在codesandbox:，图像变得非常小，而不是400px的宽度和10px的高度。

您可以使用css

transform:scale（sx，sy）

---

您不能像普通图像那样只调整宽度，因为svg是向量，它们是缩放。您需要设置preserveSpectratio（无）

使用HTML时，您可以执行以下操作：

<img src="your.svg#svgView(preserveAspectRatio(none))" />

使用React，您可以这样做：

import React, {Component} from 'react';
import ornament from '../../assets/img/ornament.svg';

class App extends Component {
  ...

  render() {
    const svgPath = `${ornament}#svgView(preserveAspectRatio(none))`;
    return (
      <img src={svgPath} width="500px" height="20px"/>
      )
  }
}

export default App;

import React，{Component}来自'React'；
从“../../assets/img/atterment.svg”导入装饰；
类应用程序扩展组件{
...
render（）{
const svgPath=`${prevent}#svgView（preserveAspectRatio（none））`；
返回(
)
}
}
导出默认应用程序；

我发现的最简单的方法是：

.你想要什么{
宽度：512px；
高度：512px；
}

请创建一个显示问题的列表。理想情况下是一个静态页面，而不是CRA React应用程序。@RobertLongson谢谢，添加了这个示例。类似这样的吗？或者编辑图像文件本身，使其在根节点上保留Aspectratio=“none”。

<img src="your.svg#svgView(preserveAspectRatio(none))" />

import React, {Component} from 'react';
import ornament from '../../assets/img/ornament.svg';

class App extends Component {
  ...

  render() {
    const svgPath = `${ornament}#svgView(preserveAspectRatio(none))`;
    return (
      <img src={svgPath} width="500px" height="20px"/>
      )
  }
}

export default App;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" style="null" class="whateverClassYouWish" >

.whateverClassYouWish {
  width: 512px;
  height: 512px;
}