Archived topic

Clip-path with svg

16 replies · Started by Angie on August 8, 2022

Viewing posts 1–15 of 17

August 8, 2022 at 5:50 am #2306685

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.

August 8, 2022 at 6:57 am #2306751

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

August 8, 2022 at 8:23 am #2306991

will do and report back. Thank you!

August 9, 2022 at 1:27 am #2307564

Let us know :)

August 9, 2022 at 3:18 am #2307659

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.

August 9, 2022 at 3:31 am #2307667

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

August 9, 2022 at 4:18 am #2307693

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>

August 9, 2022 at 4:22 am #2307694

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

August 9, 2022 at 5:47 am #2307746

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.

August 9, 2022 at 7:00 am #2307818

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

August 9, 2022 at 7:31 am #2307851

:) Keep us posted

August 9, 2022 at 11:53 am #2308201

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

The HTML for the SVG added with a hook as suggested earlier, takes up some space above the navigation, that it shouldn't...
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.

August 9, 2022 at 2:17 pm #2308281

Hi there,

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

August 9, 2022 at 9:15 pm #2308433

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

August 10, 2022 at 5:26 am #2308772

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.

This archived topic is closed to new replies.

Start building better websites today.