使SVG圖像響應引導容器

Question

我有一個svg畫布，可以顯示另一幅畫布后面的圖像。 問題是我無法將svg調整為全寬。 但是我可以提供一個高度。 這對於響應速度不起作用，我想知道是否有可能設置響應寬度，以便始終顯示自動調整高度。

 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

任何幫助將不勝感激！

Answer 1

我認為這可能對您有幫助。 刪除寬度和高度並調整百分比或使用em單位：

.blur {
  background-size: 100%;
}