[SVG筛选器使路径在Firefox / Safari / iOS上消失

问题描述 投票:0回答:1

[好吧,我正在尝试对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个回答
2
投票

删除所有内部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>
© www.soinside.com 2019 - 2024. All rights reserved.