为何React-Native中SVG支持负坐标？矩形未截断原因解析

• react-native-svg 默认不对超出 viewBox 范围的内容做裁剪，它的 overflow 属性默认值是 visible，所以哪怕图形元素的坐标超出了 viewBox 定义的区域，也会完整显示出来。
• 你设置的 viewBox="0 0 100 100" 只是定义了SVG内部的坐标系缩放规则，并没有自动开启裁剪功能。如果需要让超出 viewBox 的内容被截断，只需给 <Svg> 组件手动添加 overflow="hidden" 属性。

修改后的示例代码 #

<View
  style={{
    width: '100%',
    height: 200,
    borderWidth: 1,
  }}
>
  <Svg height='200' width='100%' viewBox='0 0 100 100' overflow="hidden">
    <Rect
      x='-10'
      y='10'
      rx='10'
      ry='10'
      width='70'
      height='10'
      fill='#ddd'
      stroke='black'
      strokeWidth='2'
    />
  </Svg>
</View>

添加 overflow="hidden" 后，矩形超出 viewBox 左边界的部分就会被截断，符合你最初预期的效果。

内容的提问来源于stack exchange，提问作者Abundance