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

您不能在filter元素上添加path css属性。这行不通。

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

使用rgb值进行测试，以获得所需的结果。

在此处了解更多-> feComponentTransfer

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

这里有一个很好的文档-> filters-to-adjust-brightness

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>

Answer 2

您可以为此使用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="1300 875 60 260">
<defs>

 <style>
  .cls-1H{fill:#ed1c24}.cls-2H{fill:#ff7500; }.cls-3H{fill:#82c341}.cls-4H{fill:#41d3ff; filter:url(#brightness)}
</style>

<filter id="brightness">
   <feComponentTransfer>
        <feFuncR type="linear" slope="2"></feFuncR>
        <feFuncG type="linear" slope="2"></feFuncG>
        <feFuncB type="linear" slope="2"></feFuncB>
    </feComponentTransfer>
  </filter>
</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"/>
<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" />
<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" />
<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" />
</svg>

详细了解css过滤器的svg等效项：https://developer.mozilla.org/en-US/docs/Web/CSS/filter

如何在SVG路径元素上设置亮度

2 个答案: