Question

我正在尝试获取一个矩形<clipPath>来将SVG元素中的<circle>裁剪，但是我似乎无法使其正常工作。

有人知道问题出在哪里吗？

在此先感谢您的帮助。

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

Em

#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和height属性

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

1 个答案: