SVG半透明描边外侧对齐求助：stroke-alignment属性无效

我完全懂你碰到的麻烦——默认SVG描边是居中绘制的，半透明状态下和填充区域重叠后特别显眼，而且stroke-alignment这个非标准属性在多数主流浏览器里根本不生效，确实得用针对性的方案解决。

给你两个靠谱的跨浏览器解决思路：

方案1：双路径分层法（最直观稳定） #

核心逻辑是用两条完全一致的路径分层处理：

• 下层路径：只做描边、不填充，并且把描边宽度设为你最终需要的2倍（因为描边默认居中，这样一半会被上层的填充路径覆盖，剩下的正好是外侧的描边）
• 上层路径：只做填充、不描边，完全盖住下层描边的内侧部分

举个具体的修改示例，假设你原本的路径代码是：

<path d="..." fill="#ffffff" stroke="#000000" stroke-width="2" opacity="0.5"/>

修改后变成：

<!-- 下层：仅描边，宽度加倍 -->
<path d="..." fill="none" stroke="#000000" stroke-width="4" opacity="0.5"/>
<!-- 上层：仅填充，覆盖描边内侧 -->
<path d="..." fill="#ffffff" stroke="none"/>

这样最终显示的就是仅在填充区域外侧的半透明描边了，效果精准且兼容所有浏览器。

方案2：paint-order配合路径缩放（适合不想复制路径的场景） #

如果不想重复写路径，可以通过控制绘制顺序+细微缩放来实现：

1. 设置paint-order: stroke fill markers，让描边先绘制在底层
2. 给路径设置轻微的放大（比如transform: scale(1.01)），让填充区域刚好盖住描边的内侧部分
3. 加上vector-effect: non-scaling-stroke，防止描边跟着缩放变粗

示例代码：

<path 
  d="..." 
  fill="#ffffff" 
  stroke="#000000" 
  stroke-width="2" 
  opacity="0.5"
  paint-order="stroke fill markers"
  transform="scale(1.01)"
  vector-effect="non-scaling-stroke"
/>

这个方法不用复制路径，但缩放比例需要根据描边宽度微调——描边越粗，需要的缩放比例就越大一点。

最后补充下：stroke-alignment是Firefox的实验性属性，目前Chrome、Safari等主流浏览器都不支持，跨浏览器场景下绝对不能依赖它，上面的两个方案都是通用的稳定解法。

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