SVG裁剪和平移的顺序

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>

结果图如下：

先平移再裁剪

在实际绘制的元素外套一层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>

结果图如下：