stroke-dasharray与stroke-dashoffset预览与实际页表现差异排查

基础配置与实现逻辑 #

• SVG环形元素代码：

<circle
   style="display:inline;fill-opacity:1;fill-rule:nonzero;stroke:#323232;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
   id="real_circle"
   cx="271.52206"
   cy="85.024849"
   r="28.786091" />

• 周长计算：真实半径r_real = r - (stroke-width/2) = 28.786091 - 3 = 25.786091，对应周长c ≈ 162
• Home Assistant HA-floorplan中用于生成样式的JavaScript代码：

style: |
  >
  return `
    stroke-dasharray: 162 162;
    stroke-dashoffset: ${-(162*(entity.state/100))};
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(180deg);
  `;

异常现象 #

• 预览页面中显示正常（例如56%电量时效果符合预期）
• 保存配置并加载实际页面后，渲染效果完全异常
• 尝试设置静态stroke-dashoffset值（如模拟66%电量设为-106.92），通过浏览器DevTools确认参数已正确应用，但渲染仍异常

核心需求 #

• 通过隐藏环形的部分区域，显示后方的绿色背景，66%电量时需从左侧逆时针隐藏66%的环形
• 需在SVG的固定位置放置5个此类环形，无法使用百分比定位方式

已排查的干扰项 #

全局CSS存在强制设置：

svg, svg * {
  vector-effect: non-scaling-stroke !important;
  pointer-events: all !important;
}

已尝试为目标环形元素添加vector-effect: none覆盖全局设置，但问题仍未解决

求分析该渲染差异的原因，并提供可行的解决方法

内容的提问来源于stack exchange，提问作者Aephir