具有非矢量缩放的 svg 路径上的一致投影大小答案

【问题标题】：Consistent drop shadow size on svg path with non-vector scaling具有非矢量缩放的 svg 路径上的一致投影大小
【发布时间】：2021-05-26 20:33:58
【问题描述】：

我正在尝试使用 vector="non-scaling-stroke" 在 svg 路径上创建效果，并使用 filter: drop-shadow(...) 创建阴影。但是，当路径被缩放以适应屏幕时（必须进行这种缩放），路径保持一致的大小，但投影会拉伸：

svg {
  width: 1000px; /*just to simulate problem, these would be vw & vh units in practice*/
  height: 200px;
}

path {
  filter: drop-shadow(0px 0px 1px blue);
}

<svg preserveAspectRatio="none" viewBox="0 0 100 100">
  <path fill="none" stroke="black" stroke-width="5" vector-effect="non-scaling-stroke" d="M0,30 h50 v70"></path>
</svg>

如您所见，阴影紧密贴合在线的水平部分，但在垂直部分分布得更多。这确实是意料之中的，但我想知道我是否缺少任何技巧，让阴影在整个路径的线条周围保持一致的大小。

除了使用我尝试过的 css 过滤器：

使用 svg 过滤器在路径上投下阴影。
在线条后面放置一条虚拟路径，使用高斯模糊来模拟阴影。

两者产生相同的结果。

我也知道我可以用 js 调整 svg viewBox 的大小以适应屏幕，从而完全避免缩放问题，但如果没有其他解决方案，这确实是最后的手段。

谢谢！

【问题讨论】：

我认为问题在于您所拥有的是一条路径，因此没有办法使阴影在路径的一侧以不同的方式应用。您最可能需要做的是将您的 SVG 转换为四个（或两个路径，如果您隐藏一部分）路径，并在顶部/底部和侧面应用不同的投影
谢谢，这是个好主意，但恐怕它不适用于我的实现，因为我正在使用 dash-offset 为线条设置动画，因此拆分路径会导致问题。跨度>

标签： html css svg

【解决方案1】：

我认为，这可行！

svg {
  width: 1000px;
  /*just to simulate problem, these would be vw & vh units in practice*/
  height: 200px;
}

<svg preserveAspectRatio="none" viewBox="0 0 100 100">
  <path fill="none" stroke="black" stroke-width="5" vector-effect="non-scaling-stroke" d="M0,30 h50 v70"></path>
   <rect x="0" y="29" width="50" height="2" style="fill:blue;filter: blur(2px);"  />
   <rect x="49.8" y="29" width=".5" height="70" style="fill:blue;filter: blur(.5px);"  />
</svg>

【讨论】：

感谢这很好用！看起来如果不使用 js 来缩放一些值，我就无法摆脱这种状态，但缩放矩形比在我的实现中缩放路径更容易，所以没关系。