如何创建一个SVG形状使其反转其背后的内容？

我们可以使用 SVG 的混合模式（mix-blend-mode）属性来实现反转效果。具体步骤如下：

1. 创建一个可以反转的 SVG 形状，可以是矩形、圆形、多边形等任意形状。例如，这里我们创建了一个圆形：

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="90" fill="#fff" mix-blend-mode="difference"/>
</svg>

2. 在形状的样式（style）里添加混合模式（mix-blend-mode）属性并设置为 difference。这个属性用于指定混合模式的类型，difference 表示混合模式为相反（即反转）。

3. 在形状上方添加需要反转的内容。这里添加了一个绿色矩形：

<svg width="200" height="200" viewBox="0 0 200 200">
  <rect x="50" y="50" width="100" height="100" fill="#0f0"/>
  <circle cx="100" cy="100" r="90" fill="#fff" mix-blend-mode="difference"/>
</svg>

完整代码：

<svg width="200" height="200" viewBox="0 0 200 200">
  <rect x="50" y="50" width="100" height="100" fill="#0f0"/>
  <circle cx="100" cy="100" r="90" fill="#fff" mix-blend-mode="difference"/>
</svg>

这样，我们便成功创建了一个 SVG 形状反转其背后的内容的效果。