SVG 中的文本元素可以完美地定位自身，尽管有固定值

Question

我正在查看 circliful.js 的源代码，发现了以下代码行：

'<text class="timer" text-anchor="middle" x="' + textX + '" y="' + textY 
                        + '" style="font-size: ' + settings.percentageTextSize + 'px; ' + additionalCss + ';' 
                        + settings.textAdditionalCss + '" fill="' + settings.fontColor + '">0%</text>'

假设textX和textY的值分别是常数

175

和

35

，为什么当圆的宽度改变时，图标的位置保持不变？

基本上，上面的代码行是您在this Fiddle中看到的百分比值，您在小提琴中看到的

50%

是上面的代码行。

所以当我有以下 CSS 时：

#circli {
  max-width: 400px;
}

尽管

175

和

35

的值恒定，但 50% 的位置仍然位于同一位置，如果我像这样更改 CSS：

#circli {
  max-width: 200px;
}

尽管

50%

和

175

具有恒定值，但

35

的位置仍然相同。为什么会这样？

Answer 1

SVG 中的元素是在恒定坐标系中定义的。您所做的只是更改 SVG 内部的

<div>

的大小。 SVG 会自动缩放以适合 div。

SVG 正在缩放，因为它有一个

viewBox

。 viewBox 告诉渲染器 SVG 文档的限制是什么，并触发自动缩放。如果它没有 viewBox，它就不会自动调整大小。