svg - 将 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 units如果您的形状没有高度或宽度。

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

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>