剪辑路径在SVG元素中不起作用

我试图得到一个矩形的

来剪辑SVG元素中的

，但我似乎无法让它工作

有人知道问题出在哪里吗

非常感谢您的帮助

代码笔：

Em

#圆{宽度：10rem；}

您忘记了剪辑路径声明周围的

<svg width=0 height=0 >
<defs>
  <clipPath id="myClipPath">
   <rect x="50px" y="50px" width="200px" height="200px"/>
  </clipPath>
</defs>
</svg>

<svg style="clip-path: url(#myClipPath)" id="circle" width="400" height="400">  
  <circle fill="#000" cx="100px" cy="100px" r="100px"/> </svg>

---

编辑：我进行了简化，添加了一个witdh和height属性，但它似乎仍然没有按预期工作？它将圆进一步向外推，似乎是添加到圆中而不是剪切它-我已经更新了代码笔。您需要将第一个SVG的宽度和高度设置为0，就像@EchoMike444所做的那样。否则SVG会占用页面空间。