Как изменить ширину высоты SVG с помощью CSS?

Question

У меня есть приложение CRA React.

Как изменить ширину и высоту SVG без сохранения соотношения сторон (например, ширина 500 пикселей, высота 10 пикселей)?

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

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

Это сохраняет соотношение сторон и изменяет только размер. Я хочу, чтобы он трансформировался в ширину 500 пикселей и высоту 20 пикселей. Так оригинально 400px 400px => 500px 20px.

РЕДАКТИРОВАТЬ: пример для codeandbox: https://codesandbox.io/s/40xj3zv5w7, изображение становится действительно маленьким вместо ширины 400 пикселей и высоты 10 пикселей.

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

Наименее сложный метод, который я нашел: 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;
}

Answer 3

Вы можете использовать css transform: scale(sx, sy)

sx = 500/400
sy = 20/400