Centering SVG horizontally

I don't have a lot of experience using SVG on the web.

I am working with a bit of SVG that is, essentially, uploaded via a CMS, so I have no control over it. I have a bit of demo SVG code I am working with, but I am unable to center (horizontally) it!

svg {
  margin:0 auto;
}

The code above does not work.

Here's the demo: http://jsbin.com/nipolocazo/1/edit

Can anyone point me in the right direction, please? Or tell me what I'm doing wrong?

Thanks!

Problem courtesy of: peduarte

Solution

You also have to set a max-width and set display: block ;

Here's the CSS:

svg {
  max-height: 300px;

  margin: 0 auto; /* poor attempt at centering */

  height: auto !important; /* overrides inline */
  width: auto !important; /* overrides inline */

  max-width: 300px;
  display: block;
}

Solution courtesy of: jonsuh

Discussion

You need to add display: block to the SVG. margin: 0 auto; relies on the element being display: block , but svg elements are display: inline by default. Additionally, WebKit also requires a width be specified. Thankfully, you can just use max-width: 100%; , rather then specify the actual width.

Working Example:

svg {
  max-height: 300px;

  margin: 0 auto; /* poor attempt at centering */

  height: auto !important; /* overrides inline */
  width: auto !important; /* overrides inline */ 
  
  display: block;
  max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <svg xmlns="http://www.w3.org/2000/svg" height="956.33856" id="svg2" preserveAspectRatio="xMinYMax meet" version="1.0" viewBox="0 0 956.69287 956.33856" width="956.69287">
  <defs id="defs4"></defs>
  <g id="layer1" transform="translate(-94.745154,-7.9548642)">
    <g id="g3183" transform="matrix(1.8024688,0,0,1.8024688,-40.596978,-681.7136)">
      <path d="M 477.07432,781.88185 C 474.87432,780.86648 472.12738,778.96386 470.97001,777.65381 C 469.81264,776.34375 459.1703,759.29689 447.32037,739.77189 C 435.47043,720.24689 413.34449,683.79689 398.1516,658.77189 C 382.95871,633.74689 369.33767,611.9944 367.8826,610.43302 C 360.72593,602.75345 347.60401,604.42017 342.18608,613.69695 C 339.13239,618.92558 339.59609,625.03813 343.62244,632.63129 C 346.53405,638.12221 346.99706,639.96586 347.01281,646.13129 C 347.05436,662.39623 336.40264,673.18281 318.99975,674.49898 C 312.90798,674.9597 310.78459,675.56552 308.48784,677.49812 C 306.90486,678.8301 295.30868,692.5991 282.71853,708.0959 C 270.12839,723.59269 258.86346,737.13545 257.68535,738.1909 C 254.68025,740.88313 245.90297,741.51032 241.69367,739.33361 C 235.15616,735.95293 232.29502,727.43828 235.37166,720.51954 C 236.41053,718.18333 255.4961,683.42189 277.78403,643.27189 C 300.07196,603.12189 319.04257,568.83174 319.94093,567.07155 C 323.18851,560.70848 321.20847,553.34878 315.27577,549.73141 C 308.31973,545.49006 302.25263,547.90741 293.44096,558.43116 C 289.98636,562.55698 285.11562,567.60443 282.61709,569.64771 C 270.5082,579.5503 268.33621,579.98408 232.83205,579.5906 L 204.07432,579.27189 L 198.07432,576.46963 C 190.30875,572.84277 185.03101,567.71738 181.51041,560.38387 C 177.74221,552.5346 176.96344,545.705 178.95166,537.94422 C 180.89453,530.36044 184.01325,525.31598 190.03728,520.01341 C 199.35517,511.81148 192.90255,512.31442 293.07432,511.9822 C 355.15192,511.77632 384.04056,512.02376 388.57432,512.80018 C 402.46662,515.17929 415.55343,524.75073 422.35057,537.50347 C 425.04981,542.56777 442.35775,590.01676 466.58558,658.77189 C 469.78342,667.84689 479.13073,694.17189 487.3574,717.27189 C 495.58407,740.37189 502.62581,760.69673 503.00572,762.43821 C 504.57206,769.61811 499.60574,778.48997 492.11569,781.89223 C 486.97843,784.22576 482.14567,784.22243 477.07432,781.88185 z" id="path2396" style="fill:#000000"></path>
      <path d="M 340.47111,402.24003 C 204.9164,402.24003 94.745156,512.38623 94.745156,647.9101 C 94.745156,783.43398 204.9164,893.58018 340.47111,893.58018 C 476.02582,893.58018 586.19708,783.43398 586.19708,647.9101 C 586.19708,512.38623 476.02582,402.24004 340.47111,402.24003 z M 340.47111,418.20661 C 467.38135,418.20662 570.22686,521.02874 570.22686,647.9101 C 570.22686,774.79147 467.38135,877.6136 340.47111,877.6136 C 213.56087,877.61359 110.71533,774.79147 110.71537,647.9101 C 110.71537,521.02874 213.56087,418.20661 340.47111,418.20661 z" id="path2406" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:38.01576614;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"></path>
    </g>
  </g>
</svg>
  
</body>
</html>

Discussion courtesy of: Alexander O'Mara

This recipe can be found in it's original form on Stack Over Flow .

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章