[Resolved] Clip-path with svg

[Angie]

Hello!
Maybe someone has an idea how to solve this? I have a slightly complicated svg-figure that is supposed to clip images on a clients website.

What I want/tried to do is use a custom-class on the image and set the clip-path: path() in css (theme editor). It works, but the svg is much larger than the image itself. Also the clip doesn’t seem to work in chrome…

Now I read that I should insert the svg via html and use the css property clip-path: url(). e.g in this tutorial: https://www.sarasoueidan.com/blog/css-svg-clipping/
But I don’t know how to do this in wordpress/generatepress/generateblocks.

My idea is, that the client can use the custom-class or insert a local pattern and change the image to use the clip-path on images.

Here’s the code I used with the “path” property.

.tropfen-a {
	object-fit:cover;
	clip-path:path('M1193.75,2367.5c1000,0 2963.33,-1738.33 1214.58,-2252.92c-848.333,-249.583 -2034.17,-131.666 -2322.5,750.417c-272.916,834.167 107.917,1502.5 1107.92,1502.5');
}

And this is what I found how the code (CSS and HTML) should look like with the “url” property:

.tropfen-b {
	object-fit:cover;
	clip-path:url (#clip-tropfen-b);
}

<svg width="0" height="0">
	<clipPath id="clip-tropfen-b" clipPathUnits="objectBoundingBox">
		<path d="M1913.75,2367.5c1000,0 1380.83,-668.333 1107.92,-1502.5c-288.334,-882.083 -1474.17,-1000 -2322.5,-750.417c-1748.75,514.584 214.583,2252.92 1214.58,2252.92"></path>
	</clipPath>
</svg>

I know this is not only a generatepress-topic, but maybe someone has an idea…

Thank you, Angie.

[David]

Hi there,

from my limited and hair pulling experience with SVG Clip Paths the second method is generally more reliable.
When i check your site though, i do not see the SVG in the body of your site. ie.:

<svg width="0" height="0">
	<clipPath id="clip-tropfen-b" clipPathUnits="objectBoundingBox">
		<path d="M1913.75,2367.5c1000,0 1380.83,-668.333 1107.92,-1502.5c-288.334,-882.083 -1474.17,-1000 -2322.5,-750.417c-1748.75,514.584 214.583,2252.92 1214.58,2252.92"></path>
	</clipPath>
</svg>

Add that code using a GP Hook Element into the wp_body_open hook, and let’s see if we can get that working.

Let me know

[Angie]

will do and report back. Thank you!

[David]

Let us know 🙂

[Angie]

Hello!
I added the HTML for two svg-forms (tropfen-a and tropfen-b) via two hook elements, as suggested.

Now the images disappeared totally… (I try to aply the clip to the images in the query loop, and below that on two seperate images)

I guess from now on it’s a clip-path problem. If you have any ideas, it would be awesome!!

Thanks,
Angie.

[David]

Do you have the original SVG ? Before it got converted to a clip path ?
If so could you share the <svg> xml here ?

[Angie]

I have two versions:
the first I got from the graphic designer, the second I converted with my graphic programm, becuase it seemed more fit for web.

1.:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 745.7 568.2" style="enable-background:new 0 0 745.7 568.2;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<title>tropfenA</title>
<g>
	<g>
		<path class="st0" d="M286.5,568.2c240,0,711.2-417.2,291.5-540.7C374.4-32.4,89.8-4.1,20.6,207.6
			C-44.9,407.8,46.5,568.2,286.5,568.2"/>
	</g>
</g>
</svg>

2.:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 3108 2368" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g><g><path d="M1193.75,2367.5c1000,0 2963.33,-1738.33 1214.58,-2252.92c-848.333,-249.583 -2034.17,-131.666 -2322.5,750.417c-272.916,834.167 107.917,1502.5 1107.92,1502.5" style="fill:#fff;fill-rule:nonzero;"/></g></g>
</svg>

[Angie]

This is one article I thought fits my problem…
https://cssfordesigners.com/articles/clip-path-scaling

[David]

I ran you first code through SVGOMG:

https://jakearchibald.github.io/svgomg/

Just to get rid of all the excess markup and then extracted just the <path>:

<path d="M286.5 568.2c240 0 711.2-417.2 291.5-540.7C374.4-32.4 89.8-4.1 20.6 207.6c-65.5 200.2 25.9 360.6 265.9 360.6" style="fill:#fff"/>

Then i added the svg and clipPath wrappers to get this.

<svg width="0" height="0">
<clipPath id="clip-tropfen-a">
    <path d="M286.5 568.2c240 0 711.2-417.2 291.5-540.7C374.4-32.4 89.8-4.1 20.6 207.6c-65.5 200.2 25.9 360.6 265.9 360.6" style="fill:#fff"/>
</clipPath>
</svg>

It works when i add it to the site in the developers tools.

[Angie]

You’re the best! I will try this and report back!

[David]

🙂 Keep us posted

[Angie]

Hey again!
I took your code for .tropfen-a, now I have two issues:

1. The HTML for the SVG added with a hook as suggested earlier, takes up some space above the navigation, that it shouldn’t…
2. I still have a scaling problem. Look at the Homepage or at this page: http://b3q5oy.myraidbox.de/uber-jump/info/. the svg should have the same width as the image…

Thank you very much!
Angie.

[Ying]

Hi there,

Your site requires a set of password/user name, can you provide that as well?

[Angie]

Sorry, I thought, that the credentials are still saved in the thread, as I sent them in the first message.
Here you go!

[David]

Try this for the SVG:

<svg width="0" height="0" style="position: absolute;">
<clipPath id="clip-tropfen-a" clipPathUnits="objectBoundingBox"><path d="M0.384,1 C0.706,1,1,0.266,0.775,0.048 C0.502,-0.057,0.12,-0.007,0.028,0.365 C-0.06,0.718,0.062,1,0.384,1"></path></clipPath>
</svg>

I found this site to do the conversion for me:

https://yoksel.github.io/relative-clip-path/

Simply paste in the path matrix eg.

For this SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 3108 2368" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g><g><path d="M1193.75,2367.5c1000,0 2963.33,-1738.33 1214.58,-2252.92c-848.333,-249.583 -2034.17,-131.666 -2322.5,750.417c-272.916,834.167 107.917,1502.5 1107.92,1502.5" style="fill:#fff;fill-rule:nonzero;"/></g></g>
</svg>

the matrix is just:

M1193.75,2367.5c1000,0 2963.33,-1738.33 1214.58,-2252.92c-848.333,-249.583 -2034.17,-131.666 -2322.5,750.417c-272.916,834.167 107.917,1502.5 1107.92,1502.5

And the it will return clip path eg.

<svg class="svg">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.384,1 c0.322,0,0.954,-0.734,0.391,-0.952 c-0.273,-0.105,-0.655,-0.056,-0.747,0.317 c-0.088,0.352,0.035,0.635,0.357,0.635"></path></clipPath>
</svg>

And you just need to update the SVG tag to:

<svg width="0" height="0" style="position: absolute;">

And makse sure to update the clipPath id.

[Author]

Posts