Блог

Главная - Вопросы по программированию - Как изменить размер svg-изображения, не обрезая его?

Как изменить размер svg-изображения, не обрезая его?

#reactjs #image #react-native #svg

#reactjs #изображение #react-native #svg

Вопрос:

Вот мой код изображения svg, написанный с помощью react-native-svg:

 import React from "react"
import 
  { 
    widthPercentageToDP as wp ,
    heightPercentageToDP as hp
  } from "react-native-responsive-screen";
import Svg, { Rect, Path } from "react-native-svg"

export const motivImageWidth = wp('100%');
export const motivImageHeight = hp('14%');

const MotivationsView = () => {
  return (
    <Svg 
      width={motivImageWidth} 
      height={motivImageHeight} 
      viewBox={"0 0 "   motivImageWidth   " "   motivImageHeight} 
      fill="none"
    >
      <Path
        d="M195 114l5.175 5.175L205.35 114"
        stroke="#fff"
        strokeWidth={3}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M400 0H0v90c0 8.284 6.716 15 15 15h370c8.284 0 15-6.716 15-15V0z"
        fill="#FDF5F1"
      />
    </Svg>
  )
}

export default MotivationsView

Прямо сейчас я создаю адаптивный дизайн для своего приложения, поэтому мне нужно изменить размер моего изображения в зависимости от размера экрана, поэтому на других устройствах мое svg-изображение обрезается. Как я могу это исправить?

Комментарии:

1. пожалуйста, попробуйте удалить эти 2 строки кода: ` width= {motivImageWidth} height = {motivImageHeight}`

2. Я сделал это, и изображение просто исчезло

3. Я подозреваю, что ваш viewBox должен быть постоянным, т.Е. Всего 4 числа, и не зависеть от высоты / ширины изображения.