SVG裁剪和平移的顺序

时间:2022-11-16 10:52:18

SVG 里为元素添加 clip-path 属性即可做出裁剪效果,添加 transfrom 属性可以平移、旋转元素。

根据需求不同,有两种情况:

  1. 先裁剪元素,再把裁剪后的图形平移
  2. 先平移元素,再按区域裁剪图形

先裁剪再平移

在实际元素的位置添加clip-path属性,则是先裁剪。

<defs>
<clipPath id="myclip" clip-rule="evenodd">
<rect x="0" y="0" width="200" height="200"/>
</clipPath>
</defs>

<rect clip-path="url(#myclip)" x="100" y="100" width="300" height="300" fill="#994C00" stroke="yellow" stroke-width="10">

<animateTransform
attributeName="transform" type="rotate"
begin="0s" dur="8s" fill="freeze"
from="0,100,100" to="360,100,100"
repeatCount="indefinite" calcMode="spline" keySplines="1 0 0 1"/>


</rect>

结果图如下:

SVG裁剪和平移的顺序

先平移再裁剪

在实际绘制的元素外套一层g,给g加上clip-path。

<g clip-path="url(#myclip2)">
<rect x="100" y="100" width="300" height="300" fill="#994C00" stroke="yellow" stroke-width="10">

<animateTransform attributeName="transform" type="rotate" begin="0s" dur="8s" fill="freeze" from="0,100,100" to="360,100,100" repeatCount="indefinite" calcMode="spline" keySplines="1 0 0 1"/>

</rect>
</g>

结果图如下:

SVG裁剪和平移的顺序