SVG circle元素的r属性百分比参照对象是什么？

示例代码 #

CSS代码：

.container{
    width: 100px;
    height: 200px;
    background-color: red;
    resize: both;     /* Just to make it... */
    overflow: hidden; /* ...resizable for testing. */
}

HTML代码：

<div class="container">
    <svg width="100%" height="100%">
        <circle cx="50%" cy="50%" r="25%" fill="black"></circle>
    </svg>
</div>

问题解答 #

你观察到cx参照容器宽度、cy参照容器高度是正确的，而<circle>的r属性使用百分比时，参照的是当前SVG视口（即与.container尺寸一致的SVG元素）的宽度的百分比。

具体表现：

• 调整.container的宽度时，r的实际长度会随宽度的百分比变化；
• 仅调整.container的高度时，r的实际长度不会改变，因为它只和视口宽度挂钩。

比如.container宽度为100px时，r="25%"对应25px；宽度拉到200px时，r就变成50px，哪怕高度还是200px。

内容的提问来源于stack exchange，提问作者Peppe L-G