svg路径上非矢量缩放的阴影大小一致

Question

我正试图用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过滤器在路径上放置阴影
• 在带有高斯模糊的线后面放置一个虚拟路径以模拟阴影

两者产生相同的结果。

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

谢谢！

Answer 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>