Фильтр SVG заставляет исчезать путь в Firefox / Safari / iOS - PullRequest
Новая
       38

Фильтр SVG заставляет исчезать путь в Firefox / Safari / iOS

0 голосов
/ 14 января 2020

Хорошо, я пытаюсь применить фильтр к пути SVG, чтобы он "светился", у меня он работает нормально в chrome, но он не работает в Safari / firefox.

Я определяю фильтры в другом SVG, поскольку тот, в котором находятся пути, генерируется внешней библиотекой (листовка. 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

1 Ответ

2 голосов
/ 14 января 2020

Удаление всех внутренних значений x, y, width и height, похоже, работает. 

<!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>
...