Элемент SVG circle выглядит как 1/4 pie

Question

Я попытался отобразить круг, центрированный в div.

This is my solution, но круг появляется cut.

В чем проблема?

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

JSFiddle

Answer 1

По умолчанию внутренних элементов <svg> клип их содержимого. Вы можете установить overflow = "visible", если вы не хотите, чтобы это произошло.

Кроме того, внешний <svg> элемент не имеет ширины/высоты, так он возвращается к значениям по умолчанию 300 х 150.

Если вы это исправить, это выглядит как этот

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>