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

Question

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

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

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

Answer 1

您不能像常规图像那样只调整宽度大小，因为svg是向量，它们可以缩放。您需要设置preserveAspectRatio（none）

当您只使用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;