我有以下 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定义后，该线按预期显示。
你不能使用对象边界框单位如果你的形状没有高度或宽度。
当适用元素的几何形状没有宽度或高度时（例如水平线或垂直线的情况），即使由于具有非零笔划宽度而在查看时具有实际厚度，也不应使用关键字 objectBoundingBox边界框计算忽略笔画宽度。当适用元素的几何形状没有宽度或高度并且指定了 objectBoundingBox 时，将忽略给定的效果（例如渐变或滤镜）。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
