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

好吧,我正在尝试对SVG路径应用过滤器以使其“发光”,我已经使其在chrome中可以正常工作,但在Safari / firefox中似乎无法正常工作。

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

以下是简化的测试版本:

io.on('connection',(socket) => {
  const chatRoomId = socket.handshake.query['chatRoomId'];      
  const userId  = socket.handshake.query['userId'];

  const user = find(userId) // Pretend :)

  socket.join(chatRoomId);

  socket.on('new_message',(id,msg) => {
    io.to(chatRoomId).emit(`${user.name} says ${msg}`);
  });

  socket.on('disconnect',() => {
    socket.leave(chatRoomId)
    console.log('user disconnected');
  });

});

如果我不应用过滤器,则路径显示会很好,但是第二次尝试应用时,该路径在safari / firefox中不可见

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

删除所有内部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>

本文链接:https://www.f2er.com/2774545.html

大家都在问