CODEWITHSUNDEEP
cssanimationsvgpath
Callum Oberholzer
Callum Oberholzer

Reputation: 51

How to apply CSS positioning to a specific point on an SVG path

So i'm looking at some experimenting with backgrounds and SVG's, and would like to have a large (Attached) triangle pointing to the left. I would like to keep point 1 fixed to it's position, while allowing the other two back points of the triangle to stretch with the page as one drags it wider to the right. So in my mind this would mean having point 1 as a fixed position, and points 2 and 3 as relatively positioned, but I don't if it's possible to apply CSS to specific points within a path.Illustration

I'm open to any ways of addressing this matter.

Thanks!

Upvotes: 0

Views: 227

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101830

You can't control the path coordinates with CSS, but you can control the SVG element size and position.

All you need to do is set the SVG to preserveAspectRatio="none" so that its contents stretch to fit the container it is in.

div
{
  padding-left: 200px;
}

svg
{
  width: 100%;
  height:200px;
}
<div>
  
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0,50 100,0 100,100 Z" fill="#7be"/>
  </svg>

</div>

Upvotes: 2

Related Questions