[好吧,我正在尝试对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中不可见
删除所有内部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>