SVG中<rect>的fillOpacity与opacity不生效，求clip-path解决方案

注意： 我清楚图像遮罩能够解决我的问题，但我不想采用该方案，因为这会导致我必须将图像设为背景，进而引发可访问性问题。我正在寻求与clip-path相关的解决方案。

问题 #

我的SVG中的<rect>元素对fillOpacity或opacity的修改没有响应。这些<rect>需要添加动画效果，因此我无法一次性调整整个图像/SVG的透明度。我尝试了一些现有解决方案，但均无效。

项目环境与代码 #

这是一个React项目，相关HTML和CSS如下：

CSS代码 #

img {
  clip-path: url(#path-One);
  height: 60vw;
}

HTML代码 #

<div>
  <img src="https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2173&q=80" alt="Big Data" />
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280.000000 673.000000">
    <clipPath id="path-One" transform="scale(1.127, 1.127)">
      <!-- Line 1: -->
      <rect width="10vw" height="10vw" fillOpacity="0" />
      <rect x="10vw" width="10vw" height="10vw" />
      <rect x="20vw" width="10vw" height="10vw" />
      <rect x="30vw" width="10vw" height="10vw" />
      <rect x="40vw" width="10vw" height="10vw" />
      <rect x="50vw" width="10vw" height="10vw" />
      <rect x="60vw" width="10vw" height="10vw" />
      <rect x="70vw" width="10vw" height="10vw" />
      <rect x="80vw" width="10vw" height="10vw" />
      <!-- Line 2: -->
      <rect y="10vw" width="10vw" height="10vw" />
      <rect x="10vw" y="10vw" width="10vw" height="10vw" />
      <rect x="20vw" y="10vw" width="10vw" height="10vw" />
      <rect x="30vw" y="10vw" width="10vw" height="10vw" />
      <rect x="40vw" y="10vw" width="10vw" height="10vw" />
      <rect x="50vw" y="10vw" width="10vw" height="10vw" />
      <rect x="60vw" y="10vw" width="10vw" height="10vw" />
      <rect x="70vw" y="10vw" width="10vw" height="10vw" />
      <rect x="80vw" y="10vw" width="10vw" height="10vw" />
      <!-- Line 3: -->
      <rect y="20vw" width="10vw" height="10vw" />
      <rect x="10vw" y="20vw" width="10vw" height="10vw" />
      <rect x="20vw" y="20vw" width="10vw" height="10vw" />
      <rect x="30vw" y="20vw" width="10vw" height="10vw" />
      <rect x="40vw" y="20vw" width="10vw" height="10vw" />
      <rect x="50vw" y="20vw" width="10vw" height="10vw" />
      <rect x="60vw" y="20vw" width="10vw" height="10vw" />
      <rect x="70vw" y="20vw" width="10vw" height="10vw" />
      <rect x="80vw" y="20vw" width="10vw" height="10vw" />
      <!-- Line 4: -->
      <rect y="30vw" width="10vw" height="10vw" />
      <rect x="10vw" y="30vw" width="10vw" height="10vw" />
      <rect x="20vw" y="30vw" width="10vw" height="10vw" />
      <rect x="30vw" y="30vw" width="10vw" height="10vw" />
      <rect x="40vw" y="30vw" width="10vw" height="10vw" />
      <rect x="50vw" y="30vw" width="10vw" height="10vw" />
      <rect x="60vw" y="30vw" width="10vw" height="10vw" />
      <rect x="70vw" y="30vw" width="10vw" height="10vw" />
      <rect x="80vw" y="30vw" width="10vw" height="10vw" />
    </clipPath>
  </svg>
</div>

内容的提问来源于stack exchange，提问作者Suryasish Paul