Clip-path with svg – GeneratePress

This topic has 16 replies, 3 voices, and was last updated 3 years, 1 month ago by David.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
August 8, 2022 at 5:50 am #2306685
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.
August 8, 2022 at 6:57 am #2306751
David
Staff
Customer Support
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

Angie

will do and report back. Thank you!

August 9, 2022 at 1:27 am #2307564

David
Staff
Customer Support

Let us know 🙂

August 9, 2022 at 3:18 am #2307659

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.

August 9, 2022 at 3:31 am #2307667

David
Staff
Customer Support

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
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"?>

<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

Angie

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

August 9, 2022 at 5:47 am #2307746
David
Staff
Customer Support
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

Angie

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

August 9, 2022 at 7:31 am #2307851

David
Staff
Customer Support

🙂 Keep us posted

August 9, 2022 at 11:53 am #2308201
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.
August 9, 2022 at 2:17 pm #2308281

Ying
Staff
Customer Support

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

Angie

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
David
Staff
Customer Support
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

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Clip-path with svg

Popular Articles

Start building better websites today.