About
The SVG Mask component is an alternative to CSS Shape-outside or CSS clip-path. Compatible with any browser that supports SVG, including IE11.
Alternatives
Accessibility
2019-01-18: Not been tested with AT, but could add aria-describedby and description inside the SVG.
Requirements
Issues
Works in IE11 :)
Examples
<svg class="svg-clip" width="1" height="1" viewBox="0 0 103.9 120">
<defs>
<clipPath id="hex-mask">
<path class="st0" d="M120,52 90,103.9 H 30 L 0,52 30,0 h 60 z" />
</clipPath>
</defs>
</svg>
<div class="c-blockbusters"><svg class="c-please-bob" role="img" viewBox="0 0 120 103.9">
<image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="https://cdn.jcmserv3.net/sample-17-04.jpg" preserveAspectRatio="xMidYMin slice" />
</svg><svg class="c-please-bob" role="img" viewBox="0 0 120 103.9">
<image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="https://cdn.jcmserv3.net/sample-16-04.jpg" preserveAspectRatio="xMidYMin slice" />
</svg><svg class="c-please-bob" role="img" viewBox="0 0 120 103.9">
<image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="https://cdn.jcmserv3.net/sample-15-04.jpg" preserveAspectRatio="xMidYMin slice" />
</svg><svg class="c-please-bob" role="img" viewBox="0 0 120 103.9">
<image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="https://cdn.jcmserv3.net/sample-14-04.jpg" preserveAspectRatio="xMidYMin slice" />
</svg><svg class="c-please-bob" role="img" viewBox="0 0 120 103.9">
<image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="https://cdn.jcmserv3.net/sample-13-04.jpg" preserveAspectRatio="xMidYMin slice" />
</svg><svg class="c-please-bob" role="img" viewBox="0 0 120 103.9">
<image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="https://cdn.jcmserv3.net/sample-12-04.jpg" preserveAspectRatio="xMidYMin slice" />
</svg><svg class="c-please-bob" role="img" viewBox="0 0 120 103.9">
<image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="https://cdn.jcmserv3.net/sample-07-04.jpg" preserveAspectRatio="xMidYMin slice" />
</svg><svg class="c-please-bob" role="img" viewBox="0 0 120 103.9">
<image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="https://pic.jcmserv3.net/400x4:3/01adef/fff.png&text=+" preserveAspectRatio="xMidYMin slice" />
</svg><svg class="c-please-bob" role="img" viewBox="0 0 120 103.9">
<image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="https://cdn.jcmserv3.net/sample-06-04.jpg" preserveAspectRatio="xMidYMin slice" />
</svg></div>