问题描述
我有以下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.
推荐答案
您不能使用 objectBoundingBox单位(如果您的形状没有高度或宽度).
You can't use objectBoundingBox units if your shape has no height or width.
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使其消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！