SVG 里为元素添加 clip-path 属性即可做出裁剪效果,添加 transfrom 属性可以平移、旋转元素。
根据需求不同,有两种情况:
- 先裁剪元素,再把裁剪后的图形平移
- 先平移元素,再按区域裁剪图形
先裁剪再平移
在实际元素的位置添加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>
结果图如下:
先平移再裁剪
在实际绘制的元素外套一层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>
结果图如下: