logo标签列表

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

csssvg
5

我想对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元素上，这个属性很好用。但是在path元素中，它不起作用。 根据我的要求，我想有条件地突出显示特定的路径元素。

1
你的标记中没有亮度过滤器，只有一些文本说明它不起作用。 - Robert Longson
亮度过滤器我正在使用 JavaScript 添加，一旦条件匹配，就像您建议的那样，我已经将该属性添加到一个类中。 - nks
2个回答
5
你不能在path元素上添加filter 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>

你可以在Firefox的路径上添加亮度过滤器。这是Chrome的一个bug，它无法正常工作。 - Robert Longson
嗨，@Mihai T，我该如何在多个路径元素中添加相同的属性（filter="url(#brightness)"）？我已经添加了，但其他路径元素被隐藏了。例如：如果我有两个具有相同颜色的路径元素，那么我该如何在这两个路径元素中应用此属性。 - nks
@NeerajShrimali 是的，我将其添加到了“绿色”的那个位置，并且它可以正常工作。请不要将其放在括号中。 - Mihai T
如果在Chrome上无法正常工作，您应该a）报告此问题，以便他们知道或b）对跟踪Chrome错误跟踪器中实现的任何现有票进行投票，以便他们知道这是人们想要的功能。 - Robert Longson
那又如何解决OP目前的问题呢？是的，你可以这样做，但这并不能帮助我解决OP的问题。在Stack Overflow上（我相信你知道），我们通过给予解决方案来帮助人们解决问题。在这种情况下，这是其中的一种解决方案。 - Mihai T
这已经不再是事实了。现在在Chrome中，可以很好地在路径元素上添加CSS过滤器属性。(编辑：据推测，您仍然可以像往常一样使用SVG过滤器，但不必这样做。) - rintaun
0

您可以使用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/zh-CN/docs/Web/CSS/filter

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接