javascript - 尽管有固定值，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，当圆的宽度改变时，图标的位置如何保持不变。

基本上，上面的代码行是您在 FIDDLE HERE 中看到的百分比值 ，您在 fiddle 中看到的 50% 就是上面的代码行。

所以当我有以下 css 时:

#circli {
  max-width: 400px;
}

尽管 175 和 35 的值不变，但 50% 的位置仍然在同一个位置，如果我像这样更改 CSS:

#circli {
  max-width: 200px;
}

50% 的位置仍然是 175 和 35 的常量值，有人可以解释为什么吗？

谢谢。

Answer 1

SVG 中的元素是在一个常量坐标系中定义的。您所做的只是更改 <div> 的大小SVG 在里面。 SVG 会自动缩放以适应 div。

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