Стилизация SVG как компонента React - PullRequest
Новая
       9

Стилизация SVG как компонента React

2 голосов
/ 07 ноября 2019

Следуя документу create-реагировать на приложение, я импортировал svg как компонент реакции .

Однако я не могу изменить его размер или правильно расположить его, независимо от того, встроен он или нет. или через css.

Я хочу масштабировать SVG-компонент до того же размера, что и мой другой значок: 100px на 100px, затем расположить его в центре нижней части экрана.

Я попытался установить параметры ширины и высотыдля компонента svg. 

<IconClose
  className="bubbleBin"
  alt="close bubble"
  height="100px"
  width="100px"
  // viewBox="0 0 100 100"
/>

и в css. 

.bubbleBin {
  display: flex;
  position: absolute;
  pointer-events: none;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
}

Вот минимальный код для его воспроизведения. Полный код в Песочница , если необходимо. 

...
import { ReactComponent as IconClose } from './assets/icon_close.svg';

function App() {
  const ICON_WIDTH = 100;
  const ICON_HEIGHT = 100;

  return (
    <div style={{ display: 'flex' }}>
       <img
         src={require('./assets/cat_icon.png')}
         width={String(ICON_WIDTH)}
         height={String(ICON_HEIGHT)}
         alt="cat icon"
         draggable={false}
       />
      <IconClose
        className="bubbleBin"
        alt="close bubble"
        height="100px"
        width="100px"
      />
    </div>
  );
}

Я ожидаю, что svg будет того же размера, что и значок моей кошки, но вместо этого это результат. svg styling problem in react

Спасибо.

Ответы [ 2 ]

0 голосов
/ 07 ноября 2019

Это не имеет ничего общего с React. Изображение SVG имеет предопределенные значения width и height из viewBox и не будет масштабироваться со свойствами width / height в результате. Вы можете узнать больше о том, как работают изображения SVG здесь .

Ваши два варианта - использовать transform: scale(X) на изображении, которое является чем-то вроде взлома, или вы можете проверить этот вопрос , чтобы увидеть, как правильно изменить изображение SVG viewBox. Это гораздо лучший вариант, чем преобразование изображения, но я предоставил оба примера, чтобы понять, почему у вас проблема с width / height.

0 голосов
/ 07 ноября 2019

viewBox вашего SVG просто имеет дополнительное пространство вокруг него. Я быстро оформил новый вид для вас. Попробуйте это: 

<IconClose
  className="bubbleBin"
  alt="close bubble"
  height="100px"
  width="100px"
  viewBox="9 9 26 26"
/>

Вот разветвленный проект с изменением.

https://codesandbox.io/s/issue-styling-svg-component-8wwtw

Эти значения, кажется, работают хорошо, вы можете настроить ихнемного больше, если вам нужно использовать десятичные значения, которые обычно хороши (например, 9.5).

...