如何设置 SVG 路径元素的亮度

Question

我想在 SVG 的特定路径元素上应用亮度。

<svg xmlns="http://www.w3.org/2000/svg" style="top: 20px; left:15px; position: absolute; z-index: 0; background: none; width:528px; height: 418px;"
viewBox="32 0 470 432">
<defs>
 <style>
  .cls-1H{fill:#ed1c24}.cls-2H{fill:#ff7500; filter: brightness(2)}.cls-3H{fill:#82c341}.cls-4H{fill:#41d3ff}
</style>
</defs>
<path id="Path_139" d="M1314.486 1130.389l-8.164-5.659a257.023 257.023 0 0 0 24.271-43.518l9.1 3.973a267.1 267.1 0 0 1-25.207 45.204z" class="cls-1H" data-name="Path 139" transform="translate(-826.518 -710.46)"/>
<path id="Path_140" d="M1343.569 1075.834l-9.248-3.625a256.932 256.932 0 0 0 14.831-55.424l9.823 1.479a266.837 266.837 0 0 1-15.406 57.57z" class="cls-2H" data-name="Path 140" transform="translate(-826.518 -710.46)"/>
<path id="Path_141" d="M1360.292 1008.228l-9.873-1.1a257.522 257.522 0 0 0 1.591-28.53v-.421a261.5 261.5 0 0 0-1.55-28.435l9.875-1.084a271.611 271.611 0 0 1 1.608 29.52v.42a267.719 267.719 0 0 1-1.651 29.63z" class="cls-3H" data-name="Path 141" transform="translate(-826.518 -710.46)"/>
<path id="Path_142" d="M1349.213 940.075a256.583 256.583 0 0 0-14.7-55.44l9.255-3.606a266.481 266.481 0 0 1 15.268 57.591z" class="cls-4H" data-name="Path 142" transform="translate(-826.518 -710.46)"/>
</svg>

我正在使用filter: brightness(2)css 属性。如果我应用于 SVG 元素，此属性工作正常。但在路径元素中，它不起作用。根据我的要求，我想有条件地突出显示特定的路径元素。

Answer 1

您无法在元素上添加filtercss 属性path。这是行不通的。

但是您可以使用一个filter元素并将其path直接在 svg html 代码中应用到您想要的元素上。

尝试使用这些rgb值，以便获得所需的结果。

在这里阅读更多内容 -> feComponentTransfer

对每个像素的数据执行颜色分量重新映射。它允许进行亮度调整、对比度调整、色彩平衡或阈值处理等操作。

这里有一个关于它的好文档 ->过滤器调整亮度

SVG 滤镜稍微复杂一些，但主要是为了给您提供更好的控制，因为它允许您独立更改每个颜色通道的亮度，而不是全部更改或不更改。

<svg xmlns="http://www.w3.org/2000/svg" style="top: 0px; left:15px; position: absolute; z-index: 0; background: none; width:528px; height: 418px;" viewBox="32 0 470 432" id="mySVG">
  <defs>
    <style>
      .cls-1H {
        fill: #ed1c24
      }

      .cls-2H {
        fill: #ff7500
      }

      .cls-3H {
        fill: #82c341
      }

      .cls-4H {
        fill: #41d3ff
      }

    </style>
  </defs>
  <filter id="my-filter">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" />
      <feFuncG type="linear" slope="2" />
      <feFuncB type="linear" slope="2" />
    </feComponentTransfer>
  </filter>

  <path id="Path_139" d="M1314.486 1130.389l-8.164-5.659a257.023 257.023 0 0 0 24.271-43.518l9.1 3.973a267.1 267.1 0 0 1-25.207 45.204z" class="cls-1H" data-name="Path 139" transform="translate(-826.518 -710.46)" />
  <path id="Path_140" d="M1343.569 1075.834l-9.248-3.625a256.932 256.932 0 0 0 14.831-55.424l9.823 1.479a266.837 266.837 0 0 1-15.406 57.57z" class="cls-2H" data-name="Path 140" transform="translate(-826.518 -710.46)" />
  <path id="Path_141"  filter="url(#my-filter)" d="M1360.292 1008.228l-9.873-1.1a257.522 257.522 0 0 0 1.591-28.53v-.421a261.5 261.5 0 0 0-1.55-28.435l9.875-1.084a271.611 271.611 0 0 1 1.608 29.52v.42a267.719 267.719 0 0 1-1.651 29.63z" class="cls-3H" data-name="Path 141" transform="translate(-826.518 -710.46)" />
  <path id="Path_142" filter="url(#my-filter)" d="M1349.213 940.075a256.583 256.583 0 0 0-14.7-55.44l9.255-3.606a266.481 266.481 0 0 1 15.268 57.591z" class="cls-4H" data-name="Path 142" transform="translate(-826.518 -710.46)" />
</svg>