如何使用CSS改变SVG的宽度和高度？

Question

我有一个使用CRA创建的React应用。

如何更改SVG的宽度和高度而不保留纵横比（例如，宽度500像素，高度10像素）？

import ornament from '../../assets/img/ornament.svg';

<img src={ornament} style={{width: '500px', height: '20px'}} />

这将保持宽高比并仅更改大小。我希望它可以转换为500像素宽度和20像素高度。所以原始的400像素*400像素 => 变成500像素*20像素。

编辑：在codesandbox上的示例：https://codesandbox.io/s/40xj3zv5w7 ，图像变得非常小，而不是400像素宽和10像素高。

- J. Reku

---

请创建一个 [mcve] 来展示问题。最好是一个静态页面，而不是 CRA React 应用程序。 - Robert Longson

@RobertLongson 谢谢，已添加示例。 - J. Reku

类似这样的代码？<img src={ornament}#svgView(preserveAspectRatio(none)) style={{width: '500px', height: '20px'}} /> - Robert Longson

请编写代码以编辑图像文件，使其在根节点上保留 preserveAspectRatio="none" 属性；或者您可以访问 https://www.w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers 。 - Robert Longson

Answer 1

由于SVG是矢量图形，会根据比例缩放，因此无法像常规图片一样仅调整宽度。您需要设置preserveAspectRatio(none)。

如果您只使用HTML，可以这样做：

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

使用 React，你可以像这样做：

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;

- Damian Peralta

Answer 2

我发现最简单的方法是： https://codepen.io/copist/pen/vLLmPB

<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;
}

- Menelik Tefera

Answer 3

您可以使用 CSS transform: scale(sx, sy)

sx = 500/400
sy = 20/400

- Domenik Reitzner

---

我想一次性修改所有的SVG文件，因为我改变了根字体大小，并希望按比例调整SVG文件的大小。这个方法行得通了！ - JMArmbruster