SVG clip-path to create a "handdrawn" div - compatibility issues and alternatives? - html

Question

I want to recreate a "hand-drawn/brushstroke" style div on a white background, like in this image:
It seemed like the perfect match for the clip-path-CSS styling. I went ahead and created an SVG, used the clipPathUnits="objectBoundingBox" attribute and encountered the first problem. When using clip-path: url(urlto.svg#pathid); it did not render, but when I included the SVG on the page (hidden), it worked. I have read this multiple times on StackOverflow but never read any solution to this. Is that behaviour normal?
As said, I got it to work with the site-embedded SVG, but as seen on the spec-documentation of the clip-path functionality, WebKit (Safari and iOS in general) has its problems rendering the thing correctly. I tried prefixing, but that didn't work either.
My question would be: Do you think there is a possibility that I might have missed something in the SVG or in the CSS-Specification that might make it work in Safari? Or, if not, do you think that the problem can be resolved using the mask-borderattribute? Does that make a difference rendering-wise? I did not manage to find the current setup to make this work - basically, as I understood it, I would need to include the same SVG and "slice" it (9-field) correctly. However, I don't understand where that border is added as I would need it to be "inwards" of the div.
I hope this makes somehow sense.
Thanks in advance!

Answer 1

As an alternative you can do it using CSS & blend-modes if this is suitable for you:
div{position:relative;width:300px;height:300px;}
div img{position:absolute;
}
img:nth-of-type(2){mix-blend-mode: screen;}
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="Darwin" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/brush.gif" alt="brush" />
</div>

Answer 2

For future reference: I ended up using probably the simplest method for my use-case, as suggested by the user Timlind - thanks again for your comment!
<div id="container">
# CONTENT #
<div id="cover"><img src="path/to/svg"></div>
</div>
CSS is straightforward:
#container {
position: relative;
}
#cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
watch out for the viewbox definition inside the SVG to facilitate scaling (no fixed with and height in the svg-definition) and set preserveAspectRatio="none" (for this use-case).
pointer-events: none allows users to "click through" the svg-overlay.