SVG: 使用PATH绘制半圆的时候多出一块空白

Question

codepen链接

多处一块空白导致旋转时取中心点错误，求问如何避免多出空白

代码部分：

<svg viewBox="0 0 500 500" preseveAspectRatio="xMidyMid slice">
    <!-- 不倒翁 -->
    <!-- <path d="M0 250 l250 -250 l250 250 a250 250 0 0 1 -500 0" stroke-width="" stroke="" fill=""/> -->
    <!-- 太极图 -->
    <g id="taiji">
        <circle r="250" cx="250" cy="250" fill="#fff" stroke="#999" stroke-width="1"/>
        <path d="M0 250 a125 125 0 1 0 250 0 a125 125 0 1 1 250 0 a250 250 0 1 0 -500 0" stroke-width="" stroke="" fill="#000"/>
        <circle r="31.25" cx="125" cy="250" fill="#fff"/>
        <circle r="31.25" cx="375" cy="250" fill="#000"/>
    </g>
</svg>


svg {
    margin: 50px auto;
    width: 500px;
    height: 500px;
    display: block;
    border: 1px dashed #000;
}
#taiji {
    max-width: 500px;
    max-height: 500px;
    overflow: hidden;
    transform-origin: center center;
    transition: all 2s;
}
#taiji:hover {
    transform: rotate(180deg);
}

Answer 1

那是你自己的margin
margin: 50px auto;