SVG mask with background image

Posted over 3 years ago by AN

Post a topic

Answered

Hi,

I want to add a SVG mask for clipping any uploads by the customer but without clipping my own layers from the product builder. Should be possible with fabric.js like in this example: https://www.deindesign.de/de/designer/folien/designskins-laptop-matt/apple-macbook-pro-15-touchbar-2018-2019/N09082M#/workspace/324448069/

Any idea how to achieve that?

Thank you and best regards

0 Votes

rady kal posted over 3 years ago Admin Best Answer

you can do that by uploading a background image on your product in the individual product settings of your WooCommerce product.

0 Votes

7 Comments

ruth cohen posted over 3 years ago

Na,

I love the way you did your toolbar.
Could you please share, I really appreciated.

Thanks so much,
Ruth

Attachments (1)

Screen shot ....png
16.4 KB

0 Votes

AN posted over 3 years ago

Hi gryadn thank you for your help,
Unfortunately the upload area always is rectangular so it is not possible to use a free form SVG, or is there a setting?
Thanks

0 Votes

gryadn posted over 3 years ago

upload area: svg or png

keyboard and apple logo: top layer

0 Votes

Hans posted over 3 years ago

Hi @gryadn,

can you please elaborate how to do it? When I add a SVG mask the mask clips all layers, so it is not possible to have a background image layer larger than the SVG.

Thank you

0 Votes

gryadn posted over 3 years ago

hi AN,

you can do a similar work using layer

0 Votes

AN posted over 3 years ago

@rady kal
Thank you for your answer, but this is not possible for multiple views right? Or can I upload a background image for each view?

Best regards

0 Votes

rady kal posted over 3 years ago Admin Answer

you can do that by uploading a background image on your product in the individual product settings of your WooCommerce product.

0 Votes