- をあなたのSVGコードのエラーがあります:行方不明クロージング "G" のタグを。
更新:1(マニュアル)
あなたは、パスの複製を作成し、その上に「ぼかし」フィルタを適用することができます。ここで
は完全な例ですが、+、新しいファイルに貼り付けるあなたのウェブブラウザで開い&を保存するコピー:
<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シャドウを作成します。 Safariのバージョンがサポートされていることを確認するには、http://caniuse.com/#feat=svg-filtersをチェックしてください。 –