Question

我有一个包含多个SVG元素的页面，每个元素都应用了一个SVG模糊滤镜。我注意到，如果元素不断移动，Chrome的内存很快就会耗尽。

要重现，请检查此codepen：http://codepen.io/anon/pen/xZJMVz

<html>
<head>
  <meta charset="UTF-8">
  <style> body {padding: 0; margin: 0;} </style>

  <svg height="0" width="0">
        <defs>      
            <filter id="f1">
                <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
            </filter>
        </defs>
    </svg>
</head>

<body>  
    <svg height="30" style="position: absolute; top: 100px; width: 1000px;height: 500px;">
      <text x="0" y="15" fill="black" id="t0">BLUR TEST!</text>
    </svg>
    <script>
    (function() {
        var svgText = document.getElementById('t0');
        svgText.setAttribute('filter', 'url(#f1)');
        var x = 0;
        var y = 0;

        setInterval(function(){
            x+=1;
            y+=1;

            if(x > 1000) {
                x = 0;
            }

            if( y > 500) {
                y = 0;
            }
            svgText.setAttribute('transform', 'translate(' + x + ',' + y + ')');
        }, 100);
    })();   
</script>
</body>
</html>

打开Chrome的任务管理器，注意该标签的内存使用情况。我提交了关于Chromium的问题跟踪器的错误报告。但是想知道是否有人之前遇到过此问题以及是否有解决方法。

谢谢！

编辑：在Windows 7上的Chrome 48.0.2564.97 m上注意到此问题。

Chrome内存泄漏，移动SVG文本和模糊过滤器

0 个答案: