Понимание element.clipPath реакции-native-svg

Question

Я пытался понять, как clipPath работает в Reaction-native-SVG.

Вот метод визуализации компонента, чтобы проиллюстрировать мое недоразумение... и я не могу его переварить:

render() {
  return (
    <View style={{ flex: 1, backgroundColor: "#fa0" }}>
      <Svg width="100%" height="100%">
        <Defs>
          <ClipPath id="windowClip">
            <G>
              {/* A: this clippath is going to be clipped internally by the text */}
              <Rect x={30} y={50} height={100} width={100} />
              <Text x={30} y={70} fontSize={40}>
                Hello world
              </Text>

              {/* B: these... these do not behave like the example above, or below... what's going on????? */}
              <Rect x={30} y={200} height={100} width={100} />
              <Rect
                  x={100}
                  y={250}
                  height={100}
                  width={100}
                  />

              {/* C: this is going to be clipped by the polygon below... */}
              <Rect x={30} y={370} height={100} width={100} />
              <Polygon
                  x={70}
                  y={400}
                  points="0,0 0,100 100,120 120,0"
                  />
            </G>
          </ClipPath>
        </Defs>
        <Rect
           height="100%"
           width="100%"
           fill="#0af"
           clipPath="url(#windowClip)"
           />
      </Svg>
    </View>
  );
}

Созданный clipPath представляет собой группу из 6 фигур, которая применяется к прямоугольнику ниже.

Здесь я отметил, формы, пересекающиеся между собой как A, B и C.

• Почему поведение противоречиво? почему многоугольник и текст вычитают часть clipPath, когда они пересекаются, а два прямоугольника не пересекаются друг с другом?
• Есть ли способ заставить B пересекаться, генерируя образец, похожий на C?