由于阴影，SVG 在 Safari 上消失了
SVG disappears on Safari because of drop-shadow
我从几个星期开始就开始使用 SVG，所以我创建了一个我想赋予 .glow 的 SVG class。添加 class 时，SVG 在 Safari 上消失了，我不知道为什么，也不知道如何修复它。我试图添加一个父项 div 并给它一个 .glow class，但这只是让它在 FireFox 中消失（但随后它在 Safari 中正确显示......？）
我该如何解决这个问题？
我的 SVG 是：
<svg width="1517px" height="404px" viewBox="0 0 1517 404" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="header__ekg-line glow">
<g id="Page-1" stroke="#94FF51" stroke-width="3" fill="none" fill-rule="evenodd">
<path id="path-1" d="M4.95180412,255.835938 L125.546576,255.835938 L153,
216 L180.341376,255.835938 L233,255.835938 L272.999991,36 L332.132813,
358.570312 L364.179526,255.835938 L432.999991,255.835938 L452.999991,
216 L472.999991,255.835938 L593.000022,255.835938 L633.000022,
136 L691.152344,365.105469 L733.000022,255.835938 L783.013999,
255.835938 L806.199219,212.730469 L833.000022,255.835938 L933.000022,
255.835938 L972.507812,118.167969 L1027.14062,372.949219 L1070.29761,
255.835938 L1113,255.835938 L1142.48977,176 L1171.26575,
255.835938 L1236.24756,255.835938 L1302.23244,16
L1384.50781,327.195312 L1421.99416,255.835938 L1513.00002,255.835938">
</path>
</g>
</svg>
这是我正在使用的class：
.glow {
-webkit-filter: drop-shadow(0px 0px 5px #94FF51);
filter: drop-shadow(0px 0px 9px #94FF51);
}
- 您的 SVG 代码中有一个错误：缺少结束 "g" 标记。
更新：1（手动）
您可以复制路径并对其应用 "blur" 过滤器。
这是一个完整的示例，复制并粘贴到新文件中，保存并在您的网络浏览器中打开：
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="1517"
height="404"
viewBox="0 0 1517 404">
<defs>
<filter id="fltBlur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<g id="Page-1" style="fill:none;stroke:#94ff51;stroke-width:3">
<path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0" />
<path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0"
style="filter:url(#fltBlur)" />
</g>
</svg>
您还可以使用 JavaScript 动态地（即时）执行此操作，而无需手动复制和应用过滤器。
更新：2（自动）- 完整示例 HTML + SVG + JavaScript
<html>
<head></head>
<body>
<svg id="svgDoc" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1517" height="404" viewBox="0 0 1517 404" style="background:#323436">
<defs>
<filter id="glow0">
<feGaussianBlur stdDeviation="0" />
</filter>
</defs>
<g id="line1" style="fill:none;stroke:#94ff51;stroke-width:3">
<path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0" />
</g>
</svg>
<script>
var glow = function(noid, size, tint, opac)
{
var root, temp, defs, glow, node, copy, home;
this.incr += 1;
root = document.getElementById('svgDoc');
temp = document.createElement('svg');
node = root.getElementById(noid);
copy = node.cloneNode(true);
home = node.parentNode;
defs = root.getElementsByTagName('defs')[0];
glow = root.getElementById('glow0').cloneNode(true);
size = (size || 1);
tint = (tint || '#000000');
opac = (opac || 1);
glow.id = ('glow'+ this.incr);
glow.innerHTML = (glow.innerHTML.split('Deviation="0"').join('Deviation="'+size+'"'));
defs.appendChild(glow);
copy.style.filter = 'url(#'+glow.id+')';
copy.style[((copy.style.fill != 'none') ? 'fill' : 'stroke')] = tint;
copy.style.opacity = opac;
home.removeChild(node);
home.appendChild(copy);
home.appendChild(node);
}
.bind({incr:0});
// -----------------------------------
glow('line1', 3, '#94ff51', 0.7); // This line does it!
// -----------------------------------
</script>
</body>
</html>
预览（部分截图）：
这是一个 SVG 示例 filters，如果背景较暗，请调整 flood-color。
<svg width="1517px" height="404px" viewBox="0 0 1517 404" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="header__ekg-line glow">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="0" result="offsetblur"/>
<feFlood flood-color="#000000"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="#94FF51" stroke-width="3" fill="none" fill-rule="evenodd">
<path filter="url(#drop-shadow)"id="path-1" d="M4.95180412,255.835938 L125.546576,255.835938 L153,
216 L180.341376,255.835938 L233,255.835938 L272.999991,36 L332.132813,
358.570312 L364.179526,255.835938 L432.999991,255.835938 L452.999991,
216 L472.999991,255.835938 L593.000022,255.835938 L633.000022,
136 L691.152344,365.105469 L733.000022,255.835938 L783.013999,
255.835938 L806.199219,212.730469 L833.000022,255.835938 L933.000022,
255.835938 L972.507812,118.167969 L1027.14062,372.949219 L1070.29761,
255.835938 L1113,255.835938 L1142.48977,176 L1171.26575,
255.835938 L1236.24756,255.835938 L1302.23244,16
L1384.50781,327.195312 L1421.99416,255.835938 L1513.00002,255.835938">
</path>
</g>
</svg>
我从几个星期开始就开始使用 SVG，所以我创建了一个我想赋予 .glow 的 SVG class。添加 class 时，SVG 在 Safari 上消失了，我不知道为什么，也不知道如何修复它。我试图添加一个父项 div 并给它一个 .glow class，但这只是让它在 FireFox 中消失（但随后它在 Safari 中正确显示......？） 我该如何解决这个问题？
我的 SVG 是：
<svg width="1517px" height="404px" viewBox="0 0 1517 404" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="header__ekg-line glow">
<g id="Page-1" stroke="#94FF51" stroke-width="3" fill="none" fill-rule="evenodd">
<path id="path-1" d="M4.95180412,255.835938 L125.546576,255.835938 L153,
216 L180.341376,255.835938 L233,255.835938 L272.999991,36 L332.132813,
358.570312 L364.179526,255.835938 L432.999991,255.835938 L452.999991,
216 L472.999991,255.835938 L593.000022,255.835938 L633.000022,
136 L691.152344,365.105469 L733.000022,255.835938 L783.013999,
255.835938 L806.199219,212.730469 L833.000022,255.835938 L933.000022,
255.835938 L972.507812,118.167969 L1027.14062,372.949219 L1070.29761,
255.835938 L1113,255.835938 L1142.48977,176 L1171.26575,
255.835938 L1236.24756,255.835938 L1302.23244,16
L1384.50781,327.195312 L1421.99416,255.835938 L1513.00002,255.835938">
</path>
</g>
</svg>
这是我正在使用的class：
.glow {
-webkit-filter: drop-shadow(0px 0px 5px #94FF51);
filter: drop-shadow(0px 0px 9px #94FF51);
}
- 您的 SVG 代码中有一个错误：缺少结束 "g" 标记。
更新：1（手动）
您可以复制路径并对其应用 "blur" 过滤器。
这是一个完整的示例，复制并粘贴到新文件中，保存并在您的网络浏览器中打开：
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="1517"
height="404"
viewBox="0 0 1517 404">
<defs>
<filter id="fltBlur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<g id="Page-1" style="fill:none;stroke:#94ff51;stroke-width:3">
<path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0" />
<path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0"
style="filter:url(#fltBlur)" />
</g>
</svg>
您还可以使用 JavaScript 动态地（即时）执行此操作，而无需手动复制和应用过滤器。
更新：2（自动）- 完整示例 HTML + SVG + JavaScript
<html>
<head></head>
<body>
<svg id="svgDoc" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1517" height="404" viewBox="0 0 1517 404" style="background:#323436">
<defs>
<filter id="glow0">
<feGaussianBlur stdDeviation="0" />
</filter>
</defs>
<g id="line1" style="fill:none;stroke:#94ff51;stroke-width:3">
<path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0" />
</g>
</svg>
<script>
var glow = function(noid, size, tint, opac)
{
var root, temp, defs, glow, node, copy, home;
this.incr += 1;
root = document.getElementById('svgDoc');
temp = document.createElement('svg');
node = root.getElementById(noid);
copy = node.cloneNode(true);
home = node.parentNode;
defs = root.getElementsByTagName('defs')[0];
glow = root.getElementById('glow0').cloneNode(true);
size = (size || 1);
tint = (tint || '#000000');
opac = (opac || 1);
glow.id = ('glow'+ this.incr);
glow.innerHTML = (glow.innerHTML.split('Deviation="0"').join('Deviation="'+size+'"'));
defs.appendChild(glow);
copy.style.filter = 'url(#'+glow.id+')';
copy.style[((copy.style.fill != 'none') ? 'fill' : 'stroke')] = tint;
copy.style.opacity = opac;
home.removeChild(node);
home.appendChild(copy);
home.appendChild(node);
}
.bind({incr:0});
// -----------------------------------
glow('line1', 3, '#94ff51', 0.7); // This line does it!
// -----------------------------------
</script>
</body>
</html>
预览（部分截图）：
这是一个 SVG 示例 filters，如果背景较暗，请调整 flood-color。
<svg width="1517px" height="404px" viewBox="0 0 1517 404" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="header__ekg-line glow">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="0" result="offsetblur"/>
<feFlood flood-color="#000000"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="#94FF51" stroke-width="3" fill="none" fill-rule="evenodd">
<path filter="url(#drop-shadow)"id="path-1" d="M4.95180412,255.835938 L125.546576,255.835938 L153,
216 L180.341376,255.835938 L233,255.835938 L272.999991,36 L332.132813,
358.570312 L364.179526,255.835938 L432.999991,255.835938 L452.999991,
216 L472.999991,255.835938 L593.000022,255.835938 L633.000022,
136 L691.152344,365.105469 L733.000022,255.835938 L783.013999,
255.835938 L806.199219,212.730469 L833.000022,255.835938 L933.000022,
255.835938 L972.507812,118.167969 L1027.14062,372.949219 L1070.29761,
255.835938 L1113,255.835938 L1142.48977,176 L1171.26575,
255.835938 L1236.24756,255.835938 L1302.23244,16
L1384.50781,327.195312 L1421.99416,255.835938 L1513.00002,255.835938">
</path>
</g>
</svg>