将feDropShadow添加到SVG中的垂直线使其消失

Question

我有以下SVG文件：

  <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="dropShadow">
      <feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
    </filter>
  </defs>
  <g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
    <path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
  </g>
</svg>

在Firefox中，当我打开SVG文档时，它仅显示一条非常细的（不是5宽）垂直线。在Chrome中，它不会显示任何内容（在codepen中也不会显示任何内容，在这里：https ://codepen.io/jwir3/pen/BJBqEK ）。

我不太确定自己在这里做错了什么，但这与过滤器有关，因为如果我filter: url(#dropShadow)从path定义中删除，则该行将按预期显示。

Answer 1

如果您的形状没有高度或宽度，则不能使用objectBoundingBox单位。

当适用元素的几何形状没有宽度或高度时，例如水平线或垂直线，即使对象线由于具有非零笔划宽度而具有实际粗细时，也不应使用关键字objectBoundingBox，因为边界框计算将忽略笔触宽度。如果适用元素的几何没有宽度或高度，并且指定了objectBoundingBox，则将忽略给定的效果（例如，渐变或滤镜）。

filterUnits的默认值为objectBoundingBox单位，因此您需要将其更改为userSpaceOnUse，即

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
  <title>Line Drop Shadow</title>
  <description>A red line with 5px width thickness and round caps, having a drop-shadow. This highlights the regression documented in PURP-1017.</description>
  <defs>
    <filter id="dropShadow" filterUnits="userSpaceOnUse">
      <feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
    </filter>
  </defs>
  <g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
    <path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
  </g>
</svg>