Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center an SVG inside a DIV

Tags:

html

sass

svg

I have a div with an SVG inside it:

whats wrong

.svg * {
  display: block;
  margin: 0 auto;
  fill: red;
}
<div class="foo ball design">
  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">
    <g>
      <path data-color="color-2" fill="#136f71" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>
      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#136f71" width="13.313" height="7.314"></rect>
      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#136f71" width="13.313" height="10.143"></rect>
      <path data-color="color-2" fill="#136f71" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>
      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>
    </g>
  </svg>
</div>

I want to center the SVG inside the div. Is this not the right way to center an SVG when it is in its "html-like" code form? (Not sure what it's called.)

I know I am targeting my sass correctly as fill: red is working.

Please Advise and let me know if you need to see more of my code, thanks for your time!

like image 794
Draxy Avatar asked Feb 06 '23 06:02

Draxy


1 Answers

  • Make the div position:relative and the svg position:absolute
  • For the svg give it top:(calc 50% - 24px) and left:(50% - 24px)

That's 50% of containing div's height minus half the height of svg and 50% of containing div's width minus half the width of svg. A position:absolute element (i.e. svg) boundaries are it's position:relative parent's (i.e. .foo) borders.

SNIPPET

.svg {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
}
.foo {
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 50%;
  border: 20px solid brown;
  background: black;
}
<div class="foo ball design">
  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">
    <g>
      <path data-color="color-2" fill="#e00" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>
      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#e00" width="13.313" height="7.314"></rect>
      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#e00" width="13.313" height="10.143"></rect>
      <path data-color="color-2" fill="#e00" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>
      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>
    </g>
  </svg>
</div>
like image 197
zer00ne Avatar answered Mar 05 '23 16:03

zer00ne