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

Question

我正在尝试让一个矩形 <clipPath> 剪辑一个 SVG 元素中的 <circle>，但我似乎无法让它工作。

有谁知道问题出在哪里？

非常感谢您的任何帮助。

Codepen：https://codepen.io/emilychews/pen/jpLMaV

嗯

#circle {width: 10rem;}

<defs>
  <clipPath id="myClipPath">
    <rect x="30" y="30" width="100" height="100"/>
  </clipPath>
</defs>

<svg id="circle" style="clip-path: url(#myClipPath)" viewBox="0 0 391 391">
  <circle fill="#000" cx="195.5" cy="195.5" r="195"/>
</svg>

Answer 1

您忘记了剪辑路径声明周围的<svg>。

<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 和高度属性