0

I tried to display a circle centered in a div.

This is my solution, but the circle appears cut.

What is the problem?

<svg>
  <svg x="10%" y="20%">
    <g transform="scale(1, 1)">
      <circle r="100"/>
    </g>
  </svg>
</svg>

JSFiddle

Community
  • 1
  • 1
iwazovsky
  • 1,919
  • 3
  • 20
  • 35

1 Answers1

2

By default inner <svg> elements clip their contents. You can set overflow="visible" if you don't want this to happen.

In addition the outer <svg> element has no width/height so it falls back to the defaults of 300 x 150.

If you fix it, it looks like this

html, body {
    width: 100%;
    height: 100%;
}
<svg width="100%" height="100%">
    <svg x="50%" y="50%" overflow="visible">
        <g transform="scale(1,1)">
            <circle r="100"></circle>
        </g>
    </svg>
</svg>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • My problem was also in bootstrap. Bootstrap has some parameters like svg:not(:root) { overflow: 'hidden'; }. Be careful. – iwazovsky Apr 17 '15 at 22:03
  • I think it probably does that to work around an IE bug where IE does not do clipping by default as other UAs do. – Robert Longson Apr 18 '15 at 06:44