Question

我目前正在学习clip-path属性，但是不要对以下问题有所了解：

我想使用带有SVG的clip-path属性来裁剪元素。这一切都很好。但是，如何移动或缩放剪切位置？我知道“ clipPathUnits”属性，即“ userSpaceOnUse”或“ objectBoundingBox”。

使用“ userSpaceOnUse”坐标系是被裁剪元素的框。有没有办法完全改变剪切位置（不更改路径）？

备用“ objectBoundingBox”要求路径的分数在[0，1]之间。因此，即使使用该功能，又如何“移动修剪区域”呢？

<svg class="clip-svg" <!--width="500" height="500" viewBox="0 0 1000 1000"-->>
  <defs>
    <clipPath id="clip-shape" clipPathUnits="userSpaceOnUse" >
      <path fill="#454545" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
                    c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
                    c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
    </clipPath>
  </defs>
</svg>

<style>
  .element {
  clip-path: url(#clip-shape);
  background-color: #42b983;
  width: 500px;
  height: 500px;
}
</style>

顺便说一句：我读了Sara Soueidans篇文章，该文章非常有帮助，但似乎我错过了一些事情。

非常感谢您的帮助或指点！

SVG的剪切路径-如何更改剪切位置或大小

0 个答案: