fillOpacity 和 opacity 似乎不起作用

Question

注意：我很清楚图像屏蔽如何解决我的问题，但我不想选择它，因为在这种情况下我将不得不使用我的图像作为背景，这将导致可访问性问题。我正在寻找一些与剪辑路径相关的解决方案。

问题：我的 SVG 中的

<rect>

没有响应

fillOpacity

或

opacity

中的更改。

<rect>

需要进行动画处理，因此我无法立即操纵整个图像/SVG 的不透明度。我尝试实施here和here提供的解决方案，但这些都不起作用。

这是一个 React 项目，这是我正在谈论的 HTML 和 CSS：

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

<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>

Answer 1

您可以用蒙版替换剪辑路径。无需将图像设置为背景。您可以只使用 CSS mask 属性。

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

<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" width="0" height="0">
    <mask id="path-One" fill="white">
      <!-- Line 1: -->
      <rect id="tile" width="10vw" height="10vw" transform="scale(.99)" />
      <use href="#tile" x="10vw" fill-opacity=".5"/>
      <use href="#tile" x="20vw"/>
      <use href="#tile" x="30vw"/>
      <use href="#tile" x="40vw"/>
      <use href="#tile" x="50vw"/>
      <use href="#tile" x="60vw"/>
      <use href="#tile" x="70vw"/>
      <use href="#tile" x="80vw"/>
      <!-- Line 2: -->
      <use href="#tile" x="0vw" y="10vw"/>
      <use href="#tile" x="10vw" y="10vw"/>
      <use href="#tile" x="20vw" y="10vw"/>
      <use href="#tile" x="30vw" y="10vw"/>
      <use href="#tile" x="40vw" y="10vw"/>
      <use href="#tile" x="50vw" y="10vw"/>
      <use href="#tile" x="60vw" y="10vw"/>
      <use href="#tile" x="70vw" y="10vw"/>
      <use href="#tile" x="80vw" y="10vw"/>
      <!-- Line 3: -->
      <use href="#tile" x="0vw" y="20vw"/>
      <use href="#tile" x="10vw" y="20vw"/>
      <use href="#tile" x="20vw" y="20vw"/>
      <use href="#tile" x="30vw" y="20vw"/>
      <use href="#tile" x="40vw" y="20vw"/>
      <use href="#tile" x="50vw" y="20vw"/>
      <use href="#tile" x="60vw" y="20vw"/>
      <use href="#tile" x="70vw" y="20vw"/>
      <use href="#tile" x="80vw" y="20vw"/>
      <!-- Line 4: -->
      <use href="#tile" x="0vw" y="30vw"/>
      <use href="#tile" x="10vw" y="30vw"/>
      <use href="#tile" x="20vw" y="30vw"/>
      <use href="#tile" x="30vw" y="30vw"/>
      <use href="#tile" x="40vw" y="30vw"/>
      <use href="#tile" x="50vw" y="30vw"/>
      <use href="#tile" x="60vw" y="30vw"/>
      <use href="#tile" x="70vw" y="30vw"/>
      <use href="#tile" x="80vw" y="30vw"/>
    </mask>
  </svg>
</div>