react-native - 如何将图标放入svg圆圈？

Question

出于某种原因，我需要用 svg 创建一个按钮。

这是我现在的代码，我发现图标将位于不同的位置而不是在圆圈内。

如何将图标放入圆圈中？

<Svg height="100%" width="100%">
  <TouchableOpacity>
    <Icon type="ionicon" name="camera" size={40} />
    <Circle r="6%" cx="50%" cy="90%" fill="white" />
  </TouchableOpacity>
</Svg>

标签： react-nativesvg

Answer 1

我使用下面的代码。

<Svg height="100%" width="100%">
  <TouchableOpacity>
    <Circle r="6%" cx="50%" cy="90%" fill="white" />
    <Text
      dx="50%"
      dy="91%"
      textAnchor="middle"
      fontSize="36"
    >
      &#x1f4f7;
    </Text>
  </TouchableOpacity>
</Svg>