将 feDropShadow 添加到 SVG 中的垂直线使其消失 [英] Adding feDropShadow to a vertical line in SVG makes it disappear

问题描述

我有以下 SVG 文档:

I have the following SVG document:

  <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).

In Firefox, when I open the SVG document, it simply shows a very thin (not 5 wide) vertical line. In Chrome, it doesn't show anything (nor does it in codepen, here: https://codepen.io/jwir3/pen/BJBqEK ).

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

I'm not quite sure what I'm doing incorrectly here, but it has something to do with the filter, because, if I remove the filter: url(#dropShadow) from the path definition, the line shows up as expected.

推荐答案

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

You can't use objectBoundingBox units if your shape has no height or width.

当适用元素的几何形状没有宽度或没有高度时，不应使用关键字 objectBoundingBox，例如水平或垂直线的情况，即使该线由于具有非零而在查看时具有实际粗细笔画宽度，因为边界框计算会忽略笔画宽度.当适用元素的几何形状没有宽度或高度并且指定了 objectBoundingBox 时，将忽略给定的效果(例如，渐变或过滤器).

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 即

The default for filterUnits is objectBoundingBox units so you need to change that to userSpaceOnUse i.e.

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

这篇关于将 feDropShadow 添加到 SVG 中的垂直线使其消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！