CODEWITHSUNDEEP
htmlcsssvgpath
Wizzardzz
Wizzardzz

Reputation: 841

Have an SVG path stay centered inside the div

I have a SVG path that I'd like to have centered horizontally in the SVG view no matter how the window width changes (like the background img does in #liquids). I couldn't find a solution yet..

.container {
    width: 100%;
}

#liquids{
    background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg) no-repeat scroll center 0 transparent;
    width: 100vw;
    height: 100vh;
}
#p3 {
    fill: #0400ff;
}
<div class=container">
    <svg id="liquids">
        <g class="p3-g">
            <path id="p3" d="M 200 200 C 50 350 100 0 350 50 C 550 100 650 100 650 250 C 650 450 450 300 450 350 C 450 550 250 150 200 200 Z"/>
        </g>
    </svg>
</div>

I am quite new to SVGs, pardon me if I am missing the obvious here.

Upvotes: 0

Views: 70

Answers (1)

Temani Afif
Temani Afif

Reputation: 274384

Don't make the SVG big like you are doing, keep a height/width that fit its content by reducing the viewBox and considering a max-width equal to the image width then you can easily center it using any centring technique:

.container {
    width: 100%;
    background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg) no-repeat top ;
    height: 100vh;
}
svg {
  display:block;
  max-width:500px;
  margin:auto;
  border:1px solid; /* to illustrate*/
}
#p3 {
    fill: #0400ff;
}

body {
  margin:0;
}
<div class="container">
    <svg id="liquids" viewBox="110 40 550 370">
        <g class="p3-g">
            <path id="p3" d="M 200 200 C 50 350 100 0 350 50 C 550 100 650 100 650 250 C 650 450 450 300 450 350 C 450 550 250 150 200 200 Z"/>
        </g>
    </svg>
</div>

Upvotes: 2

Related Questions