使SVG图像响应引导容器

Question

I have an svg canvas which reveals an image behind another one. The problem is that I can't resize the svg to be full width. I can however provide a height. This doesn't work for responsiveness and I would like to know if it's at all possible to set a responsive width so it always shows with automatically adjusting the height.

 var svgNS = "http://www.w3.org/2000/svg"; $('.pic').mousemove(function(event) { event.preventDefault(); var upX = event.clientX; var upY = event.clientY; var mask = $('#mask1')[0]; var circle = document.createElementNS(svgNS, "circle"); circle.setAttribute("cx", upX); circle.setAttribute("cy", upY); circle.setAttribute("r", "50"); circle.setAttribute("fill", "white"); circle.setAttribute("filter", "url(#filter2)"); mask.appendChild(circle); setTimeout(function() { circle.style.opacity = '0'; setTimeout(function() { mask.removeChild(circle); }, 300); }, 4000); }); 

 body { margin: 0; padding: 0; } .pic { text-align: center; position: relative; height: 400px; margin: 0; padding: 0; } .blur { height: 100%; width: 100%; } .overlay { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } circle { opacity: 1; -webkit-transition: opacity 200ms linear; transition: opacity 200ms linear; } 

 <div class="container-fluid"> <div class="row"> <div class="pic"> <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"> <image filter="" xlink:href="http://staging.600lines.com/alta-2-12-16/img/a.jpg" width="100%" height="100%"></image> <filter id="filter2"> <feGaussianBlur stdDeviation="10" /> </filter> <mask id="mask1"> <circle cx="-50%" cy="-50%" r="30" fill="white" filter="" /> </mask> <image xlink:href="http://staging.600lines.com/alta-2-12-16/img/b.jpg" width="100%" height="100%" mask="url(#mask1)"></image> </svg> </div> </div> </div> 

Codepen

Any help would be greatly appreciated!

Answer 1

I think this may help you. Remove width and height and adjust percentaje or use em units:

.blur {
  background-size: 100%;
}