使 SVG 映像响应引导容器

Making SVG image responsive to bootstrap container

本文关键字：响应 SVG 映像      更新时间：2023-09-26

我有一个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>

代码笔

任何帮助将不胜感激！

我认为这可能会对您有所帮助。删除宽度和高度并调整百分比或使用全角形单位：

.blur {
  background-size: 100%;
}
相关文章：