使 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

我认为这可能会对您有所帮助。移除 width 和 height 并调整百分比或使用 em 单位：

.blur {
  background-size: 100%;
}