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的高度/宽度作为内联css样式放在style属性中：

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

Answer 2

您的问题很难理解。我将假设您希望SVG进行缩放以适合其父视图。正确吗？

如果是这样，您可能想要执行以下操作：

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

如何设置svg大小以适合其内容？

2 个答案: