Open sawa-ko opened 2 years ago
Good one! Technically doable with SVG, just need to write a good parser and transformer for that prop.
Hi, @shuding, any progress? I have not been aware of the latest versions. 😅
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.
This one isn't trivial — I'm open to accept PRs if anyone want to contribute!
Hi! @shuding I am working on clip-path
, can you assign it to me?
@Jackie1210 Sure!
@sawa-ko @IgnaHeck @natew You can try clip-path
now in v0.7, let me know if there is any issues.
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.
I dug into backdrop-filter
again, and i think there are two ways to impl this property:
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.
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
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?
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