Как установить размер SVG, чтобы соответствовать его содержанию?

Question

содержание моего SVG зависит от ширины / высоты устройства.Есть много элементов, и я не могу рассчитать содержание этого.Теперь, как я могу установить ширину / высоту, если svg в зависимости от содержимого?

      <Svg
        ref="circleslider"
        width={?}
        height={?}
        style={{ justifyContent: 'center', alignItems: 'center', }}>
           .. my elemetns

обновлен полный код:

return (

  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

    <View style={{ width: '100%', height: '100%', borderRadius: ((width) / 2), justifyContent: 'center', alignItems: 'center' }}
    >

      <Svg
        ref="circleslider"
        width={width}
        height={width}
        style={{ justifyContent: 'center', alignItems: 'center', }}>

      <Circle
          cx={(width) / 2}
          cy={(width) / 2}
          r="140"
          fill="#f9ebea"
          {...this._panResponderTwo.panHandlers}
        />

      <Circle
          cx={(width) / 2}
          cy={(width) / 2}
          r="120"
          fill="#f9e1e1"
          {...this._panResponderTwo.panHandlers}
        />

        <Circle
          cx={(width) / 2}
          cy={(width) / 2}
          r="100"
          fill="#f9dbd9"
          {...this._panResponderTwo.panHandlers}
        />



        <Circle
          cx={(width) / 2}
          cy={(width) / 2}
          r={this.props.diameterCenter}
          fill="#fff"
        />

        {/* <Image
            x={((heightDevice) / 4) - (imageWidth/8)}
            y={((widthDevice) / 4) - (imageWidth/8)}
            r={this.props.diameterCenter}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_center.png')}
            clipPath="url(#clip)" /> */}



        <G x={bankingservicesCoord.x - widthHeight} y={bankingservicesCoord.y - widthHeight}
          style={{ justifyContent: 'center', alignItems: 'center' }}>

          {(moveed == 'bankingservices') ?
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill={selectedItemColor}
                stroke={selectedItemColor}
                {...this._panResponderBankingServices.panHandlers}
              />
            )
            :
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill="#fff"
                stroke={selectedItemColor}
                {...this._panResponderBankingServices.panHandlers}
              />
            )
          }

          <Image
            x={imageX}
            y={imageY}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_bank.png')}
            clipPath="url(#clip)"
            {...this._panResponderBankingServices.panHandlers} />

        </G>

        <G x={shopsCoord.x - widthHeight} y={shopsCoord.y - widthHeight}>

          {(moveed == 'shops') ?
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill={selectedItemColor}
                stroke={selectedItemColor}
                {...this._panResponderShops.panHandlers}
              />
            )
            :
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill="#fff"
                stroke={selectedItemColor}
                {...this._panResponderShops.panHandlers}
              />
            )
          }


          <Image
            x={imageX}
            y={imageY}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_shop.png')}
            clipPath="url(#clip)"
            {...this._panResponderShops.panHandlers} />

        </G>

        <G x={locationsCoord.x - widthHeight} y={locationsCoord.y - widthHeight}>

          {(moveed == 'location') ?
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill={selectedItemColor}
                stroke={selectedItemColor}
                {...this._panResponderLocations.panHandlers}
              />
            )
            :
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill="#fff"
                stroke={selectedItemColor}
                {...this._panResponderLocations.panHandlers}
              />
            )
          }

          <Image
            x={imageX}
            y={imageY}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_location.png')}
            clipPath="url(#clip)"
            {...this._panResponderLocations.panHandlers} />

        </G>

        <G x={kasianserviceCoord.x - widthHeight} y={kasianserviceCoord.y - widthHeight}>


          {(moveed == 'kasianservices') ?
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill={selectedItemColor}
                stroke={selectedItemColor}
                {...this._panResponderKasianServices.panHandlers}
              />
            )
            :
            (
              <Circle
                r={widthHeight}
                cx={widthHeight}
                cy={widthHeight}
                fill="#fff"
                stroke={selectedItemColor}
                {...this._panResponderKasianServices.panHandlers}
              />
            )
          }

          <Image
            x={imageX}
            y={imageY}
            width={imageWidth}
            height={imageHeight}
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            style={{ alignSelf: 'center' }}
            href={require('../../../images/ics/home/ic_kasian.png')}
            clipPath="url(#clip)"
            {...this._panResponderKasianServices.panHandlers} />
        </G>


      </Svg>


    </View>


  </View>
)

Answer 1

Ваш вопрос трудно понять.Я предполагаю, что вы хотите, чтобы SVG масштабировался так, чтобы соответствовать его родительскому виду.Это правильно?

Если это так, вы, вероятно, хотите сделать что-то вроде этого:

  <Svg
    ref="circleslider"
    width="100%"
    height="100%"
    viewBox="0 0 {width} {width}">

Answer 2

Просто укажите высоту / ширину svg как встроенный стиль css в атрибуте style:

<Svg
    ref="circleslider"
    style={{ justifyContent: 'center', alignItems: 'center', width: '100px', height: '100px' }}>