Support backdrop-filter

[sawa-ko]

Feature Request

Description

Currently using those style properties does not work, regardless of whether it is used in a div, image, etc. It would be great to support more style properties to create amazing images!

Additional Context

https://og-playground.vercel.app/?share=nVTbTuMwEP0Vy1JVkNI29EaJ2kq7LBI87Gol0O5LX5xkmhqcOHLcpqHqv--MQyilYpHIg2OfMz7judg7HukYeMCnsdwsMsYKWymY7XY0Z2wFMlnZgLUvfL_V9mqwlLFdvcNiWeRKVIguFWwb1MLWflMyyRCPILNgGkYQemchLU6ox3Vh5bK61ghm5PuYJv0f0kBkpXa6Wq3T7C3714gciUyXOGmIUERPidHrLL7WShvky5W0cErfpSIBpI2IpVCdhP54gLNImkgBE5b1R_nWDR7DKFYWTSrWb3nMGpEVuTBozvzWucc-1rgkDRo-0Tg93718puNh8lHBjY1NpGT-W7jS5FpVic7OfOZ7KEN2qE0j88_bZL7fL7I5TZrCvy_9RzX9b-0-rR65Zcw5RtfFJmn21Z022018Z0HfRkL5XW9nC45hYLLYeLTgDbmUSiETKkzMAW1CYKkwiaT2oI2YohfHr67ReY6pYjFq_BxcdkdX3f5IDcbdK3QzvO2Oh_WiMx4-L_h82iPr5tg9PHedux4m74tZXGKG6loO_WOQBFz_mlSowwZsdNe3LuQDXEf6oLHlBwchJTO4fbm8F93JK-6a_j4XEXnIDXTe3pHj4oTzP2AiUOwmToD9Altq8zTthUeRN3_ucZ3TjSx4sOPuheDBxPc9XheWB0NaxBCuEx4shSrA45DqR_lQ5fT-2NKtUIdycJOGEPPAmjXs9_8A

[shuding]

Good one! Technically doable with SVG, just need to write a good parser and transformer for that prop.

[sawa-ko]

Hi, @shuding, any progress? I have not been aware of the latest versions. 😅

[IgnaHeck]

Hi, we are working on dynamically generating interfaces using a UI application. We are looking forward to integrate this feature. Do you have any updates?

Just FYI, this is a highly demanded feature that can greatly improve the quality of our product. It would be very helpful to have it.

[shuding]

This one isn't trivial — I'm open to accept PRs if anyone want to contribute!

[Jackie1210]

Hi! @shuding I am working on clip-path, can you assign it to me?

[shuding]

@Jackie1210 Sure!

[Jackie1210]

@sawa-ko @IgnaHeck @natew You can try clip-path now in v0.7, let me know if there is any issues.

[Jackie1210]

I think we should know each markup equivalent of each function before implement backdrop-filter. I've read a lot of spec, google a lot but i didn't reach it. I believe it does need deep use and much knowledgement on svg filter effects. I would appreciate if there is any pointer.

[Jackie1210]

I dug into backdrop-filter again, and i think there are two ways to impl this property:

1. if more browser supported BackgroundImage, we can write some code below:

<filter id="blur" x="0" y="0" width="100%" height="100%">
  <feGaussianBlur stdDeviation="10" in="BackgroundImage"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

but now there is no browser support it.

2. we may hack BackgroundImage by feImage like below:

<pattern id="satori_biid_0" patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse" x="0" y="0"
        width="100%" height="100%">
  <image x="0" y="0" width="200" height="200" preserveAspectRatio="none" href="https://interactive-examples.mdn.mozilla.net/media/examples/balloon.jpg" />
</pattern>
<image id="image" x="0" y="0" width="200" height="200" preserveAspectRatio="none" href="https://interactive-examples.mdn.mozilla.net/media/examples/balloon.jpg" />
<filter id="blur" x="0" y="0" width="100%" height="100%">
  <!-- can't use xlink:href="#image": no support in FF -->
  <feImage x="0" y="0" width="200" height="200" preserveAspectRatio="none" href="https://interactive-examples.mdn.mozilla.net/media/examples/balloon.jpg" />
  <!-- not supported -->
  <feImage x="0" y="0" width="200" height="200" preserveAspectRatio="none" href="#satori_biid_0" />
  <feGaussianBlur stdDeviation="10" />
</filter>

since we use pattern to support background-repeat, and feImage seems do not support href="#satori_biid_0" if satori_biid_0 is a pattern id, so if the background is complicated, this way fails too. Also, it does need satori to spend more time to generate more large svg string.

What do you think? :broken_heart: @shuding

[Aerophite]

Looks like the movement on this stalled at the beginning of June. Is it possible for this to be worked on again and/or does anyone have any work arounds?