SVG 剪切路径无法与 CSS 动画一起正常工作答案

【问题标题】：SVG clipping path not working correctly with CSS animationSVG 剪切路径无法与 CSS 动画一起正常工作
【发布时间】：2020-02-26 22:34:03
【问题描述】：

剪切路径与我屏蔽的对象一起动画。我希望剪切路径保持原样，以便我可以为下面的对象设置动画。

Here's how the image looks in Illustrator

It outputs properly in the browser. However, when I go to move the reflection position, the mask moves with it.

我已经定位了#Reflection ID，但它也在移动剪切路径。

<g>
    <defs>
        <path id="SVGID_7_" d="M775.58,676.03h69.62V552.34h-69.62V676.03z M871.16,552.34l0,123.69l69.63,0l0-123.69L871.16,552.34z
             M967.23,552.34l0,123.69l69.63,0l0-123.69L967.23,552.34z M1132.94,552.34l-69.63,0l0,123.69l69.63,0L1132.94,552.34z"/>
    </defs>

    <clipPath id="SVGID_8_">
        <use xlink:href="#SVGID_7_"  overflow="visible"/>
    </clipPath>

    <g id="Reflection" clip-path="url(#SVGID_8_)">
            <rect x="702.5" y="601.74" transform="matrix(0.395 -0.9187 0.9187 0.395 -81.7378 1094.6456)" fill="#FFFFFF" width="175.45" height="15.28"/>
            <rect x="732.3" y="601.74" transform="matrix(0.395 -0.9187 0.9187 0.395 -63.7121 1122.0173)" fill="#FFFFFF" width="175.45" height="15.28"/>
    </g>
</g>

【问题讨论】：

标签： css svg css-animations clipping

【解决方案1】：

您可以将矩形包装在一个额外的 g 元素中并将转换应用于该组。在下一个示例中，我将使用 SMIL 动画来执行此操作：

body{background:black;}
#SVGID_7_{stroke:red; fill="none"}

<svg viewBox = "740 520 130 180">
<g>
    <defs>
        <path id="SVGID_7_" d="M775.58,676.03h69.62V552.34h-69.62V676.03z M871.16,552.34l0,123.69l69.63,0l0-123.69L871.16,552.34z
             M967.23,552.34l0,123.69l69.63,0l0-123.69L967.23,552.34z M1132.94,552.34l-69.63,0l0,123.69l69.63,0L1132.94,552.34z"/>
    </defs>

    <clipPath id="SVGID_8_">
        <use xlink:href="#SVGID_7_" fill="black"/>
    </clipPath>
<use xlink:href="#SVGID_7_"/>
    <g id="Reflection" clip-path="url(#SVGID_8_)">
      <g transform="translate(-80,0)">
            <rect x="702.5" y="601.74" transform="matrix(0.395 -0.9187 0.9187 0.395 -81.7378 1094.6456)" fill="#FFFFFF" width="175.45" height="15.28"/>
            <rect x="732.3" y="601.74" transform="matrix(0.395 -0.9187 0.9187 0.395 -63.7121 1122.0173)" fill="#FFFFFF" width="175.45" height="15.28"/>
        <animateTransform 
    	  attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="-80,0; 200,0" 
        calcMode="linear" 
        dur="4s" 
        repeatCount="indefinite" />
        </g>
    </g>
  
</g>
</svg>

以及使用 css 动画的相同示例：

body{background:black;}
#SVGID_7_{stroke:red; fill="none"}

#Reflection g{animation: anim 4s infinite;}

@keyframes anim {   
     from { transform:translate(-80px,0)}   
     to   { transform:translate(200px,0)}  
  }

<svg viewBox = "740 520 130 180">
<g>
    <defs>
        <path id="SVGID_7_" d="M775.58,676.03h69.62V552.34h-69.62V676.03z M871.16,552.34l0,123.69l69.63,0l0-123.69L871.16,552.34z
             M967.23,552.34l0,123.69l69.63,0l0-123.69L967.23,552.34z M1132.94,552.34l-69.63,0l0,123.69l69.63,0L1132.94,552.34z"/>
    </defs>

    <clipPath id="SVGID_8_">
        <use xlink:href="#SVGID_7_" fill="black"/>
    </clipPath>
<use xlink:href="#SVGID_7_"/>
    <g id="Reflection" clip-path="url(#SVGID_8_)">
      <g>
            <rect x="702.5" y="601.74" transform="matrix(0.395 -0.9187 0.9187 0.395 -81.7378 1094.6456)" fill="#FFFFFF" width="175.45" height="15.28"/>
            <rect x="732.3" y="601.74" transform="matrix(0.395 -0.9187 0.9187 0.395 -63.7121 1122.0173)" fill="#FFFFFF" width="175.45" height="15.28"/>        
      </g>
    </g>
  
</g>
</svg>

【讨论】：