Как установить яркость над элементом пути 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.Но в элементе path это не работает.Согласно моему требованию, я хочу условно выделить конкретный элемент пути.

Answer 1

Нельзя добавить свойство filter css для элемента path.Это не будет работать.

Но вы можете использовать элемент filter и применить его к path, который вы хотите прямо в html-коде svg.

Поэкспериментируйте со значениями 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>

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>

Подробнее об svg-эквивалентах фильтров css: https://developer.mozilla.org/en-US/docs/Web/CSS/filter