SVG半圆动画线条截断问题：大stroke-width下如何修复？

问题原因 #

SVG的描边（stroke）默认是居中绘制在路径两侧，当stroke-width数值较大时，描边的一部分会超出SVG的视口（viewBox定义的范围），导致显示时被截断。

解决方案 #

方案1：让描边仅向内延伸（推荐）

使用SVG2标准的stroke-alignment: inner属性，直接指定描边只向路径内侧扩展，完全避免描边超出路径边界，无需修改路径半径或调整视口。

修改后的代码：

<svg version="1.1" 
     id="foo" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="160"
     height="160"
     viewBox="0 0 160 160" >
  <g stroke="black" fill="none" stroke-width="20" stroke-alignment="inner">
    <path d="M 0 80 A 80 80 0 0 1 80 0"/>
  </g>
  <animateTransform 
     attributeName="transform" 
     attributeType="XML" 
     type="rotate"
     dur="2s" 
     from="0 0 0"
     to="360 0 0" 
     repeatCount="indefinite" />
</svg>

方案2：扩大SVG视口（兼容旧浏览器）

如果需要兼容不支持stroke-alignment的旧浏览器，可以调整viewBox参数，给描边留出足够的显示空间。比如stroke-width=20时，描边会向两侧各延伸10单位，因此将viewBox向四周各扩展10单位，确保整个描边都在视口内：

修改后的代码：

<svg version="1.1" 
     id="foo" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="160"
     height="160"
     viewBox="-10 -10 180 180" >
  <g stroke="black" fill="none" stroke-width="20">
    <path d="M 0 80 A 80 80 0 0 1 80 0"/>
  </g>
  <animateTransform 
     attributeName="transform" 
     attributeType="XML" 
     type="rotate"
     dur="2s" 
     from="0 0 0"
     to="360 0 0" 
     repeatCount="indefinite" />
</svg>

额外提示 #

你的动画旋转中心是(0,0)，如果希望围绕半圆的中心旋转，建议将animateTransform的from和to参数改为from="0 80 80"和to="360 80 80"，这样旋转中心会落在SVG画布的中心位置，动画效果更符合预期。

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