Question

我有一个CRA React App。

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

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

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

这将保留长宽比，并且仅更改大小。我希望将其转换为500px的宽度和20px的高度。所以原始的400px 400px => 500px 20px。

编辑：codeandbox上的示例：https://codesandbox.io/s/40xj3zv5w7，图像变得很小，而不是宽度为400px和高度为10px。

Answer 1

您不能像常规图像一样仅调整宽度，因为svg是向量，并且它们缩放。您需要设置 preserveAspectRatio（无）

仅使用 HTML 时，您可以做以下事情：

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

Answer 2

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

sx = 500/400
sy = 20/400

Answer 3

我发现的最简单的方法： 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;
}

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

3 个答案: