Я хочу применить яркость к определенному элементу пути 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>

Я использую свойство css filter: brightness(2). Это свойство работает нормально, если я применяю к элементу SVG. Но в элементе пути это не работает. Согласно моему требованию, я хочу условно выделить конкретный элемент пути.

0
Neeraj Shrimali 27 Сен 2019 в 13:44

2 ответа

Лучший ответ

Вы не можете добавить свойство 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>
2
Mihai T 27 Сен 2019 в 13:28

Вы можете использовать фильтр 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

0
enxaneta 27 Сен 2019 в 12:27