Question

我在带有圆圈的svg画布正上方的div内有一个p标签，但我只显示圆圈的下半部分。 y中心坐标不应该从画布上开始20 px吗？

  <body>
    <div id="header">
        <p>Is this a circle?</p>
    </div>
    <svg width="500px" height="40px">
        <circle r="20" cx="50" yx="20" />
    </svg>
    <div class="footer">
        <p>Yeah, looks like it</p>
    </div>
  </body>

Answer 1

您在SVG代码中拼错了一个属性：

<circle r="20" cx="50" yx="20" />
                    /* ^^^ It should be cy */

如果缺少cy属性，则会使用其默认值，即0。这就是为什么圆的一半在视口区域之外并且不可见的原因。

这是正确的变体：

<circle r="20" cx="50" cy="20" />

<div id="header">
    <p>Is this a circle?</p>
</div>
<svg width="500px" height="40px">
    <circle r="20" cx="50" cy="20" />
</svg>
<div class="footer">
    <p>Yeah, looks like it</p>
</div>

为什么圆圈的上半部分没有显示出来

1 个答案: