Question

我试图以div为中心显示一个圆圈。

This is my solution，但圆圈显示为切割。

有什么问题？

<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 x 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>

SVG圆形元素显示为1/4饼

1 个答案: