Hi
I am trying to use the clip-path property is this supported in Planet Press?
http://bennettfeely.com/clippy/
Thanks
Liam
Hello Liam,
The clip-path property is partially supported by our layout engine. Will provide a sample on how to use it.
Erik
Hi Erik
OK, I need to create a custom shaped image box with overflow hidden.
Thanks
Liam
Hi Liam,
You can use the clip-path property by creating a SVG clippath and reference that in the url option. I’ve used Clip Path Generator - CSS Plant to create the path and added the resulting SVG to the Source of the template. Subsequently I referenced the #clipPolygon in the url option of the clip-path property. This is how it looks:
<img style="clip-path: url(#clipPolygon);" src="images/kunstwachter.jpg">
<svg width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="392 203,504 276,247 234,394 142"></polygon>
</clipPath>
</svg>
This is currently the only method supported by the Connect layout engine. The basic shape options of the clip-path property are not supported.
Hope that this is of some help.
Erik
Some samples:
Hi Erik
Thanks for the solution, it is getting there, however I need to add this to a DIV (it seems to include a " before and after the url path of the svg??!) and it screws up my drop shadow!!
Code below:
<div
style="box-shadow: 7px 7px 15px 0px rgba(50, 50, 50, 0.7); width: 191px; height: 159px; transform: rotate(3deg); position: absolute; text-align: center; overflow: hidden; top: 182.813px; left: 54.8053px; clip-path: url("#clipPolygon");"
offset-x="92.5999984741211" offset-y="220.61666870117188" anchor="page_media_0">
<img id="dynamic-image" style="height: 100%; display: block; margin: auto;" src="">
</div>
Sample:
Managed to make it work but… have to admit it became a little Rocket Science project. Consider the svg code below. To simplify positioning of the dropshadow (created using an svg filter) the img element is now wrapped inside the svg code using the foreignobject element. The clippath is still assigned to the image. The svg code also writes the same polygon shape behind the image. This polygon has gaussionblur filter assigned to create the dropshadow. Both the image and the svg polygon are rotated.
You can still use scripting to dynamically replace the image source. I’ve ran some quick output tests and the resulting PDF looked fined.
Let me know how it goes,
Erik
<svg class="svg-graphic" height="360" width="1200" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<svg height="0" width="0">
<clippath id="clip"><polygon points="154 200,281 262,223 26,51 73,27 277"></polygon></clippath>
</svg>
<filter id="shadow" height="120%">
<fegaussianblur stdDeviation="3.25" in="SourceAlpha"></fegaussianblur>
<feoffset result="offsetblur" dx="10" dy="10"></feoffset>
<fecomponenttransfer><fefunca slope="0.4" type="linear"></fefunca></fecomponenttransfer>
</filter>
</defs>
<polygon transform="rotate(3 100 100)" fill="black" points="154 200,281 262,223 26,51 73,27 277" filter="url(#shadow)"></polygon>
<foreignobject height="360px" width="400px">
<!-- HTML begins -->
<img style="clip-path: url(#clip); height: 360px; width: 300px; transform: rotate(3deg);" src="images/kunstwachter.jpg">
<!-- HTML ends -->
</foreignobject>
</svg>
Hi Erik
I get the following error when using the code:
I think we have cracked it!!
<div style="width: 191px; height: 159px; transform: rotate(3deg); position: absolute; top: 571.367px; left: -7.18333px; "> <svg class="svg-graphic" height="200" width="260" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <svg height="0" width="0"> <clippath id="clip"><polygon points="0 148,9 159,196 159,193 15,182 0,0 0"></polygon></clippath> </svg> <filter id="shadow" height="120%"> <fegaussianblur stdDeviation="3.25" in="SourceAlpha"></fegaussianblur> <feoffset result="offsetblur" dx="3" dy="3"></feoffset> <fecomponenttransfer><fefunca slope="0.4" type="linear"></fefunca></fecomponenttransfer> </filter> </defs> <polygon fill="black" points="0 148,9 159,196 159,193 15,182 0,0 0" filter="url(#shadow)"></polygon> <foreignobject height="159px" width="191px"> <!-- HTML begins --> <img id="dynamic-image" style="clip-path: url(#clip); height: 100%; width: 100%; " src=""> <!-- HTML ends --> </foreignobject> </svg> </div>
The variant below is using a background image and makes use of the background-size: cover CSS property to scale the image to the largest possible size so that it covers the entire div.
To make this a dynamic image you will need to create a script that set the background-image path which would like something like this (selector: #dynamic-image):
var path = "file:///C:/images/" + record.fields.ImageName;
results.css('background-image', 'url(' + path + ')');
Below the code snippet:
<div
style="width: 213px; height: 174px; position: absolute; text-align: center; overflow: hidden; top: 570.883px; left: -19.2167px; transform: rotate(3deg);"
offset-x="18.58333396911621" offset-y="608.683349609375" anchor="page_media_0">
<svg class="svg-graphic" height="360" width="1200" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<clippath id="clip"><polygon points="0 148,9 159,196 159,193 15,182 0,0 0"></polygon></clippath>
<filter id="shadow" height="120%">
<fegaussianblur stdDeviation="3.25" in="SourceAlpha"></fegaussianblur>
<feoffset result="offsetblur" dx="10" dy="10"></feoffset>
<fecomponenttransfer><fefunca slope="0.4" type="linear"></fefunca></fecomponenttransfer>
</filter>
</defs>
<polygon fill="black" points="0 148,9 159,196 159,193 15,182 0,0 0" filter="url(#shadow)"></polygon>
<foreignobject height="100%" width="100%">
<!-- HTML begins -->
<div id="dynamic-image" style="width: 195px; height: 160px; background: url(http://placehold.it/400x300?text=placeholder) no-repeat scroll center/ cover; clip-path: url("#clip");"></div>
<!-- HTML ends -->
</foreignobject>
</svg>
</div>
