如何用内联CSS实现SVG圆形从顶部逆时针描边填充（适配Windows Chrome）

我来帮你搞定这个SVG环形填充的难题！你遇到的跨浏览器差异问题，主要是因为transform-origin的关键字解析和元素属性设置的小问题导致的，下面给你一步步的解决方案：

问题分析 #

默认情况下，SVG的描边（stroke）是从元素的右侧开始绘制的，所以我们需要通过旋转把起始点转到顶部。你之前用rotate(-90deg)的思路是对的，但Windows Chrome对transform-origin: center的关键字解析可能存在兼容性问题，再加上你代码里的一些小错误（比如重复的stroke-width、错误的圆环半径），才导致效果不一致。

修正后的完整代码 #

<svg width="100" height="120" xmlns="http://www.w3.org/2000/svg">
  <!-- 灰色背景圆环 -->
  <circle cx="60" cy="60" r="24" fill="none" stroke="#e6e6e6" stroke-width="12" />
  <!-- 红色填充圆环：从顶部开始逆时针填充 -->
  <circle 
    cx="60" 
    cy="60" 
    r="24" 
    fill="none" 
    stroke="red" 
    stroke-width="12" 
    stroke-dasharray="150.8" <!-- 圆环周长：2 × π × 24 ≈ 150.8 -->
    stroke-dashoffset="75.4" <!-- 这里设置为周长的一半，即填充50% -->
    transform="rotate(-90deg, 60, 60)" <!-- 以圆心(60,60)为原点旋转-90度 -->
    stroke-linecap="round" <!-- 可选：让圆环端点更圆润 -->
  />
</svg>

关键调整点 #

• 修正圆环半径：你之前第二个circle的r="12"是错误的，应该和背景圆环保持一致的r="24"（因为stroke-width="12"，描边会向内外各延伸6px，所以半径24才能和背景圆环对齐）。
• 明确旋转中心：把transform-origin的关键字替换为具体的圆心坐标(60,60)，直接写在rotate属性里（rotate(-90deg, 60, 60)），这样所有浏览器都能正确识别旋转原点，避免兼容性问题。
• 计算正确的描边参数：
  1. 先算出圆环的周长：2 × π × 半径，这里是2 × 3.1416 × 24 ≈ 150.8。
  2. stroke-dasharray设为周长，这样描边会被分成一段完整的线。
  3. stroke-dashoffset控制填充长度：
     • 完全不填充：设为150.8
     • 填充50%：设为150.8 × 0.5 = 75.4
     • 完全填充：设为0
• 移除重复属性：删掉代码里重复的stroke-width="12"，避免属性冲突。

实现逆时针填充的原理 #

SVG默认描边是顺时针方向，我们通过rotate(-90deg)把起始点转到顶部后，调整stroke-dashoffset的值，就能实现从顶部开始的逆时针填充效果——offset值越大，填充的部分越少，反之则越多。

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