如何在没有解析错误的情况下在svg中使用剪切路径？

Question

我尝试按照此处显示的示例使用剪切路径：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath 但是它只给出错误“ XML解析错误：前缀未绑定到名称空间”我该怎么办？

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <circle cx="40" cy="35" r="35" />
  </clipPath>
  <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
  <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" />
</svg>