SVG中的text元素将自己完全置于固定值之外

text element in SVG positions itself perfectly inspite of fixed values

本文关键字：于固定 text 中的 元素 自己 SVG      更新时间：2023-09-26

我正在浏览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的启发，有人能解释为什么吗？

谢谢。

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

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

相关文章：