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

【问题标题】：text element in SVG positions itself perfectly inspite of fixed valuesSVG 中的文本元素完美地定位自身，尽管有固定值
【发布时间】：2016-03-23 21:40:42
【问题描述】：

我正在浏览 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 中看到的百分比值，您在小提琴中看到的 50% 是上面的代码行。

所以当我有以下 css 时：

#circli {
  max-width: 400px;
}

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

#circli {
  max-width: 200px;
}

50% 的位置仍然是具有恒定值 175 和 35 的相同启发，有人可以解释为什么吗？

谢谢。

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

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

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

【讨论】：