SVG圆形设置stroke-alignment="outer"仍重叠，如何让描边位于外侧？

你设置的stroke-alignment不是SVG标准属性，浏览器根本不识别，所以这个设置完全没用。SVG默认的描边是沿着路径的中心线绘制的，就拿你的例子来说，stroke-width="40"意味着描边会有20px的宽度压在蓝色填充区域上，自然会出现重叠。

下面给你两种可行的解决方法：

方法一：用两个圆形实现完全无重叠的外侧描边 #

直接画两个圆：一个只做蓝色填充，半径保持100；另一个只做红色描边，半径设为100 + 40/2 = 120，这样描边的范围刚好在蓝色圆的外侧，完全不会和填充区域重叠：

<body>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 240 240"
      height="240"
      width="240"
    >
      <!-- 仅填充的蓝色圆 -->
      <circle
        cx="120"
        cy="120"
        r="100"
        fill="blue"
        fill-opacity="1"
      ></circle>
      <!-- 仅描边的红色圆 -->
      <circle
        cx="120"
        cy="120"
        r="120"
        fill="none"
        stroke="red"
        stroke-opacity="0.5"
        stroke-width="40"
      ></circle>
    </svg>
  </body>

方法二：单圆形配合绘制顺序实现视觉上的外侧描边 #

如果你不想用两个圆，可以用paint-order属性调整绘制顺序，让描边先画，填充后画，这样蓝色填充会盖住描边压在内部的部分，视觉上看起来描边就只在外侧了：

<body>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 240 240"
      height="240"
      width="240"
    >
      <circle
        cx="120"
        cy="120"
        r="100"
        fill="blue"
        fill-opacity="1"
        stroke="red"
        stroke-opacity="0.5"
        stroke-width="40"
        paint-order="stroke fill"
      ></circle>
    </svg>
  </body>

注意：这个方法只是视觉上消除了重叠，底层像素其实还是有重叠的，如果你的场景要求完全无重叠（比如需要单独选中描边或填充），建议用方法一。

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