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

本文介绍了将 feDropShadow 添加到 SVG 中的垂直线使其消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下 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 时，将忽略给定的效果(例如，渐变或过滤器).

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 中的垂直线使其消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！