SVG 过滤器使路径在 Firefox/Safari/iOS 上消失答案

【问题标题】：SVG filter makes path disappear on Firefox/Safari/iOSSVG 过滤器使路径在 Firefox/Safari/iOS 上消失
【发布时间】：2020-04-30 17:11:32
【问题描述】：

好的，我正在尝试对 SVG 路径应用过滤器以使其“发光”，我已经让它在 chrome 中运行良好，但在 Safari/firefox 中似乎无法运行。

我在另一个 SVG 中定义过滤器，因为路径所在的过滤器是由外部库 (leaflet.js) 生成的

这里是简化的测试版本：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg style="position: absolute; top: -20px; width:0;height:0" id="svgFilters" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<defs id="svgFilters">
		<filter id='testFilter' filterRes="10 10" x="-20%" y="-20%" width="140%" height="140%"
				filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
			<feComposite in="SourceAlpha" in2="SourceAlpha" operator="arithmetic" k1="0" k2="8" k3="-0.5" k4="-0.5" x="0%" y="0%" width="100%" height="100%" result="composite"/>
			<feColorMatrix type="matrix" values="1 0 0 0 1
					0 1 0 0 0
					0 0 1 0 0
					0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="composite" result="colormatrix1"/>
			<feMorphology operator="dilate" radius="10 10" x="0%" y="0%" width="100%" height="100%" in="colormatrix1" result="morphology1"/>
			<feGaussianBlur stdDeviation="10 10" x="0%" y="0%" width="100%" height="100%" in="morphology1" edgeMode="none" result="blur2"/>-->
			<feComposite in="blur2" in2="composite" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite2"/>
			<feMerge x="0%" y="0%" width="100%" height="100%" result="merge">
				<feMergeNode in="composite2"/>
				<feMergeNode in="SourceGraphic"/>
			</feMerge>
		</filter>
	</defs>
</svg>


<svg width="400" height="200" viewBox="0 -500 500 100" >
	<g>
		<path
			stroke="#ff0000"
			stroke-opacity="1"
			stroke-width="3"
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-dasharray="8, 6"
			stroke-dashoffset="0"
			filter="url(#testFilter)"
			fill="green"
			fill-opacity="0.2"
			fill-rule="evenodd"
			d="M211 -552L106 -483L245 -512L273 -431L271 -517zM215 -541L192 -523L238 -521L242 -525z">
		</path>
	</g>
	<defs>
		<pattern id="./img/map/greenstripedBG.png51362524558747380820" x="0" y="0" patternUnits="userSpaceOnUse" width="32" height="32">
			<rect width="24" height="24" x="0" fill="#ff0000"></rect>
			<image x="0" y="0" xlink:href="./img/map/greenstripedBG.png" width="32" height="32"></image>
		</pattern>
	</defs>
</svg>
</body>
</html>

如果我不应用过滤器，路径显示正常，但第二次尝试应用它，路径在 safari/firefox 中不可见

【问题讨论】：

标签： firefox svg safari svg-filters

【解决方案1】：

删除所有内部 x、y、宽度和高度值似乎可行。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg style="position: absolute; top: -20px; width:0;height:0" id="svgFilters" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<defs id="svgFilters">
		<filter id='testFilter' x="-20%" y="-20%" width="140%" height="140%"
				filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
			<feComposite in="SourceAlpha" in2="SourceAlpha" operator="arithmetic" k1="0" k2="8" k3="-0.5" k4="-0.5" result="composite"/>
			<feColorMatrix type="matrix" values="1 0 0 0 1
					0 1 0 0 0
					0 0 1 0 0
					0 0 0 1 0"  in="composite" result="colormatrix1"/>
			<feMorphology operator="dilate" radius="10 10"  in="colormatrix1" result="morphology1"/>
			<feGaussianBlur stdDeviation="10 10"  in="morphology1" edgeMode="none" result="blur2"/>
			<feComposite in="blur2" in2="composite" operator="out" result="composite2"/>
			<feMerge result="merge">
				<feMergeNode in="composite2"/>
				<feMergeNode in="SourceGraphic"/>
			</feMerge>		</filter>
	</defs>
</svg>


<svg width="400" height="200" viewBox="0 -500 500 100" >
	<g>
		<path
			stroke="#ff0000"
			stroke-opacity="1"
			stroke-width="3"
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-dasharray="8, 6"
			stroke-dashoffset="0"
			filter="url(#testFilter)"
			fill="green"
			fill-opacity="0.2"
			fill-rule="evenodd"
			d="M211 -552L106 -483L245 -512L273 -431L271 -517zM215 -541L192 -523L238 -521L242 -525z">
		</path>
	</g>
</svg>
</body>
</html>

【讨论】：

感谢您的帮助，这绝对是一个开始。路径现在出现了，它现在在 Firefox 中运行良好，但在 safari 中，我得到了整个路径的巨大模糊结果，你可以看到它。
当我在 Safari 中运行我的答案时，对我来说似乎没问题。您是否注意到我也删除了 filterRes。它已经过时了，现在只有 Safari 支持它。
是的，就是这样。我将您的答案复制并粘贴到我的测试页面上，它起作用了，然后在真实版本中重新实现它并遇到了问题。没有注意到 filterRes 删除，删除它并且一切正常。我不知道我在用 SVG 做什么，并使用在线生成器制作过滤器。
问题是您在原始尺寸中使用了primitiveUnits="userSpaceOnUse" 和 x=100% 等。这些 100% 将被解释为单个 userSpace 单元（又名 userSpaceOnUse 声明导致 100% 被解释为 1。）您不能在单个过滤器中的图元中混合 objectBounding Box（又名 %）和 userSpaceOnUse（又名像素）。