Существует ли хотя бы жалкое подобие backdrop-filter blur для внутренних тегов SVG?

Рейтинг: 5Ответов: 3Опубликовано: 04.05.2023

К примеру, я хочу сделать backdrop-filter только для одной области внутри svg

<svg viewBox="5 0 152 105" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="cp">
       <path id="path" d="M 6.0139145,89.958663 5.9306737,14.28071 5.959018,12.568955 6.3309417,11.028962 6.8235133,10.035253 7.3793611,9.041341 9.3500378,6.7548283 13.550667,2.8155243 C 14.67483,1.9362075 16.0106,1.5510744 17.358302,1.1938047 L 142.42076,1.0736563 c 2.8909,0.7135299 5.83626,1.2083394 7.50675,6.8231398 l 0.0822,28.8704419 c -0.80252,4.255437 -3.30577,6.290779 -6.40877,7.543212 l -20.37252,0.06542 c -2.79243,-0.0065 -4.56944,1.560769 -6.40209,3.041809 l -9.3455,9.474271 c -1.0581,1.366953 -2.10861,2.738506 -1.84464,4.905626 l 0.008,26.515735 c -0.39597,1.424336 -0.50091,2.706448 -2.16648,4.751247 l -8.741937,8.615852 c -1.348032,1.30297 -2.947394,1.86095 -4.798383,1.67305 l -77.219112,0.0167 C 9.216709,102.22075 6.7998863,100.05263 5.9533779,96.409824 Z" />
      </clipPath>
    </defs>
    <rect  width="100%" height="100%" fill="rgba(255,0,0,.5)"  clip-path="url(#cp)" />

  </svg>

А это либо path внутри defs либо на rect который обрезан clipPath.

Не нашёл ни одного фильтра в сети который делал бы тоже самое.

Сам filter работает на самом теге svg но не применяется к rect, image, path итд

css svg css-filters
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

На основе удалённого ответа сделал наложение блюра, но с координатами пока небольшие сложности - надо как-то подвинуть. Постараюсь поправить...

html, body, svg {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
}
<svg viewBox="0 0 152 105" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="path" d="M 6.0139145,89.958663 5.9306737,14.28071 5.959018,12.568955 6.3309417,11.028962 6.8235133,10.035253 7.3793611,9.041341 9.3500378,6.7548283 13.550667,2.8155243 C 14.67483,1.9362075 16.0106,1.5510744 17.358302,1.1938047 L 142.42076,1.0736563 c 2.8909,0.7135299 5.83626,1.2083394 7.50675,6.8231398 l 0.0822,28.8704419 c -0.80252,4.255437 -3.30577,6.290779 -6.40877,7.543212 l -20.37252,0.06542 c -2.79243,-0.0065 -4.56944,1.560769 -6.40209,3.041809 l -9.3455,9.474271 c -1.0581,1.366953 -2.10861,2.738506 -1.84464,4.905626 l 0.008,26.515735 c -0.39597,1.424336 -0.50091,2.706448 -2.16648,4.751247 l -8.741937,8.615852 c -1.348032,1.30297 -2.947394,1.86095 -4.798383,1.67305 l -77.219112,0.0167 C 9.216709,102.22075 6.7998863,100.05263 5.9533779,96.409824 Z" />

    <filter id="glass">
      <!-- mask -->
      <feImage xlink:href="#path" result="ceva" />

      <!-- we could add some displacement too -->
      <feGaussianBlur in="ceva" stdDeviation="50" result="map" />
      <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="A" yChannelSelector="A" scale="60" result="bomba" />

      <!-- inside blur -->
      <feGaussianBlur in="bomba" stdDeviation="3" result="blurat" />
      <feGaussianBlur/>
      <!-- if you want outside blur too -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="weakBlur" />

      <!-- here the magic happens -->
      <feComposite in="blurat" in2="ceva" operator="in" result="mascat" />
      <feComposite in="weakBlur" in2="ceva" operator="out" result="exterior" />
      <feComposite in="exterior" in2="mascat" operator="over"  />
    </filter>
  </defs>

  <g id="bg" filter="url(#glass)">
    <image href="https://all-aforizmy.ru/wp-content/uploads/2021/11/original_planeti.jpg" x="-10" y="-10" width="120%" height="120%" />
    <circle cx="56" cy="56" r="30" opacity=".5" />
  </g>
  
  <use href="#path" fill="none" stroke="black" stroke-width="0.5"/>
</svg>

▲ 2

Вот, что то похоже, вроде работает

Буду дальше искать варианты

* {
  margin: 0;
  padding: 0;
}

.blurred {
  fill: #fff;
  filter: blur(5px);
}
<svg viewBox="0 0 152 105" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path id="path" d="M 6.0139145,89.958663 5.9306737,14.28071 5.959018,12.568955 6.3309417,11.028962 6.8235133,10.035253 7.3793611,9.041341 9.3500378,6.7548283 13.550667,2.8155243 C 14.67483,1.9362075 16.0106,1.5510744 17.358302,1.1938047 L 142.42076,1.0736563 c 2.8909,0.7135299 5.83626,1.2083394 7.50675,6.8231398 l 0.0822,28.8704419 c -0.80252,4.255437 -3.30577,6.290779 -6.40877,7.543212 l -20.37252,0.06542 c -2.79243,-0.0065 -4.56944,1.560769 -6.40209,3.041809 l -9.3455,9.474271 c -1.0581,1.366953 -2.10861,2.738506 -1.84464,4.905626 l 0.008,26.515735 c -0.39597,1.424336 -0.50091,2.706448 -2.16648,4.751247 l -8.741937,8.615852 c -1.348032,1.30297 -2.947394,1.86095 -4.798383,1.67305 l -77.219112,0.0167 C 9.216709,102.22075 6.7998863,100.05263 5.9533779,96.409824 Z" />
      
      <clipPath id="cp">
            <use href="#path" />
      </clipPath>
      

  </defs>

   <image id="image" href="https://all-aforizmy.ru/wp-content/uploads/2021/11/original_planeti.jpg" x="-10" y="-10" width="120%" height="120%"/>
    <g class="blurred" clip-path="url(#cp)" opacity="0.96">
      <use  href="#image"  x="-2" y="-1.5"  />
    </g>
    <use href="#path" fill="none" stroke="black" stroke-width="0.5"/>
  </svg>

▲ 1

Оберни всё предшествующее в группу, которую будешь накладывать поверх через use с blur'ом:

html, body, svg {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.bg-blur {
  filter: blur(5px);
  animation: filter 5s linear alternate infinite;
}

@keyframes filter {
  from { filter: blur(0px); }
  to   { filter: blur(5px); }
}
<svg viewBox="0 0 152 105" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="path" d="M 6.0139145,89.958663 5.9306737,14.28071 5.959018,12.568955 6.3309417,11.028962 6.8235133,10.035253 7.3793611,9.041341 9.3500378,6.7548283 13.550667,2.8155243 C 14.67483,1.9362075 16.0106,1.5510744 17.358302,1.1938047 L 142.42076,1.0736563 c 2.8909,0.7135299 5.83626,1.2083394 7.50675,6.8231398 l 0.0822,28.8704419 c -0.80252,4.255437 -3.30577,6.290779 -6.40877,7.543212 l -20.37252,0.06542 c -2.79243,-0.0065 -4.56944,1.560769 -6.40209,3.041809 l -9.3455,9.474271 c -1.0581,1.366953 -2.10861,2.738506 -1.84464,4.905626 l 0.008,26.515735 c -0.39597,1.424336 -0.50091,2.706448 -2.16648,4.751247 l -8.741937,8.615852 c -1.348032,1.30297 -2.947394,1.86095 -4.798383,1.67305 l -77.219112,0.0167 C 9.216709,102.22075 6.7998863,100.05263 5.9533779,96.409824 Z" />
      
    <clipPath id="cp">
      <use href="#path" />
    </clipPath>
  </defs>

  <g id="bg">
    <image href="https://all-aforizmy.ru/wp-content/uploads/2021/11/original_planeti.jpg" x="-10" y="-10" width="120%" height="120%" />
    <circle cx="56" cy="56" r="30" opacity=".5" />
  </g>
  
  <use href="#bg" class="bg-blur" clip-path="url(#cp)" />

  <use href="#path" fill="none" stroke="black" stroke-width="0.5"/>
</svg>