Question

我有一个svg画布，显示另一个背后的图像。问题是我无法将svg调整为全宽。但是我可以提供一个高度。这对于响应性并不起作用，我想知道它是否可以设置响应宽度，因此它总是显示自动调整高度。

＆＃13;

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);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Codepen

非常感谢任何帮助！

Answer 1

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

        function handleFormSubmit(formObject) {
                    console.log('handleFormSubmit')
        console.log(formObject)

        console.log(jsonRow)
            google.script.run.withSuccessHandler(google.script.host.close).processRowPopupHTML(formObject);

        }

使SVG图像响应引导容器

1 个答案: