Attachment #316562
HTML test case	text/html	2017-07-27 12:06:46 PDT	1.02 KB	no flags	Details

<!DOCTYPE html> <!-- Created using JS Bin http://jsbin.com Copyright (c) 2017 by anonymous (http://jsbin.com/xemobevafa/1/edit) Released under the MIT license: http://jsbin.mit-license.org --> <meta name="robots" content="noindex"> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style id="jsbin-css"> svg { border: 1px solid red; } div { background: red; width: 100%; height: 100%; } svg.filter div { -webkit-filter: blur(10px); } </style> </head> <body> <p>Click anywhere on the SVG image below and notice the shift when applying CSS filters to the red rectangle.</p> <svg width='500' height='500'> <g transform='matrix(1 0 0 1 100 100)'> <foreignObject x='50' y='50' width='200' height='200'> <div>Click me</div> </foreignObject> </g> </svg> <script id="jsbin-javascript"> var svg_el = document.querySelector('svg'); svg_el.addEventListener('click', function(e) { svg_el.classList.toggle('filter'); }); </script> </body> </html>