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

问题描述

我有以下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 ).

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

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

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.

推荐答案

您不能使用

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>

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