How to align an svg properly?

user_11845164 0
Viewed 49

I have some trouble aligning an svg I am new to this thing. I want to see it as a whole and place it at the center of the main container. Need your help guys. Thanks in advance.

<div class="main-container">
        <h1>Hi</h1>
          <svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
            <path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
          </svg>
      </div>

.css

.main-container {
  position: relative;
  padding: 0 0 0 20px;
  float: right;
  width: calc(100% - 240px);
}

svg.morph {
  position: absolute;
  margin: 0;
  background-color: #00ff1f;
}

enter image description here enter image description here

svg css html
2 Answers

Please use the correct viewBox="168 140 1065 600" value.

.main-container {
    position: relative;
    padding: 0 0 0 20px;
    float: right;
    width: calc(100% - 240px);
    height:100vh;
}
svg.morph {
    position: absolute;
    margin: 0;
    max-width:100%;
    background-color: #00ff1f;
}
<div class="main-container">
  <h1>Hi</h1>
  <svg class="morph" viewBox="168 140 1065 600" preserveAspectRatio="none">
    <path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
  </svg>
</div>

user_60768630

Center with position absolute:

position absolute:
left:50%;
top:50%;
transform: translate(-50%, -50%);


.main-container {
  position: relative;
  padding: 0 0 0 20px;
  float: right;
  width: calc(100% - 240px);
  border: 2px solid red; /*<<<<<<<<<<<<<<<<<<<<< Added to see container limit */
}

svg.morph {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background-color: #00ff1f;
}
<div class="main-container">
  <h1>Hi</h1>
  <svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
    <path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
  </svg>
</div>

user_110445420
Related