作为背景的敏感英雄图象

Question

我试图将此codepen interactive SVG mask作为我网站中的一个页面。但我想要做的是将整个东西放在540px高度的盒子里，宽度为100％（拉伸到浏览器边缘，保持宽高比的方面。）。但我似乎无法找到一种方法来做到这一点。提前谢谢。

以下是codepen中的HTML，CSS，JS文件。

＆＃13;

＆＃13;

console.clear();
var svg = document.querySelector("#demo");
var tl = new TimelineMax({onUpdate:onUpdate});
var pt = svg.createSVGPoint();
var data = document.querySelector(".tlProgress");
var counter = document.querySelector("#counter");
var ratio = 0.5625;

TweenMax.set("#instructions, #dial", {xPercent: -50});
TweenMax.set("#progressRing", {drawSVG:0});

tl.to("#masker", 2, {attr:{r:2400}, ease:Power2.easeIn});
tl.reversed(true);

function mouseHandler() {
  tl.reversed(!tl.reversed());
}

function getPoint(evt){
  pt.x = evt.clientX; 
  pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}

function mouseMove(evt) {
  var newPoint = getPoint(evt);
  TweenMax.set("#dot", {attr:{cx:newPoint.x, cy:newPoint.y}});
  TweenMax.to("#ring, #masker", 0.88, {attr:{cx:newPoint.x, cy:newPoint.y}, ease:Power2.easeOut});
 }

function onUpdate() {
  var prog = (tl.progress() * 100);
  TweenMax.set("#progressRing", {drawSVG:prog + "%"});
  counter.textContent = prog.toFixed();
}

function newSize() {
  var w = window.innerWidth ;
  var h = window.innerHeight;
  if (w > h * (16/9) ) {
    TweenMax.set("#demo", { attr: { width: w, height: w * ratio } });
  } else {
    TweenMax.set("#demo", { attr: { width: h / ratio, height: h } });
  }
  var data = svg.getBoundingClientRect();
  TweenMax.set("#demo", {x:w/2 - data.width/2});
  TweenMax.set("#demo", {y:h/2 - data.height/2});
}

window.addEventListener("mousedown", mouseHandler);
window.addEventListener("mouseup", mouseHandler);
window.addEventListener("mousemove", mouseMove);

newSize();
window.addEventListener("resize", newSize);

＆＃13;

body {
  padding: 0;
  margin: 0;
  font-family: "Signika", sans-serif;
  background: #262626;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  color: white;
}

p {
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

* {
  box-sizing: border-box;
}

#demo {
  cursor: none;
  position: absolute;
}

#instructions {
  position: absolute;
  padding: 12px;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.75);
  left: 50%;
  cursor: none;
  padding-top: 100px;
  user-select: none;
  border-radius: 4px;
}

#dial {
  position: absolute;
  top: 0;
  left: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="demo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="1600" height="900" viewBox="0 0 1600 900">
  <defs>
  <radialGradient id="maskGradient">
    <stop offset="50%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#000"/>
  </radialGradient>
  <mask id="theMask">
   <circle id="masker" r="150" fill="url(#maskGradient)" cx="800" cy="450" />
  </mask>
  </defs> 
    <image id="lines" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/roomSketch.jpg" x="0" y="0" width="1600" height="900" />
    <g id="maskReveal" mask="url(#theMask)" > 
      <image id="regular" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/roomColor.jpg" x="0" y="0" width="1600" height="900" />
    </g>
    <circle id="ring" r="20" fill="none" stroke="#dc143c" stroke-width="2" cx="800" cy="450" />
    <circle id="dot" r="4" fill="#dc143c" cx="800" cy="450" />
</svg>

<div id="instructions">
  <svg id="dial" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <path id="progressRing" d="M50,10A40,40,0,1,1,10,50,40,40,0,0,1,50,10Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="6"/>
  <circle r="43" fill="none" stroke="#fff" cx="50" cy="50" stroke-width="2" opacity="0.5" />
   <circle r="37" fill="none" stroke="#fff" cx="50" cy="50" stroke-width="2" opacity="0.5"/>
   <text transform="translate(55 56)" text-anchor="start" font-size="20" fill="#fff">%</text>
   <text id="counter" transform="translate(55 56)" text-anchor="end" font-size="20" fill="#fff">0</text>
  </svg>
  <p>Hover mouse to move mask around.</p>
  <p>Hold &amp; release mouse button to expand &amp; contract mask.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你想要的吗？

＆＃13;

＆＃13;

console.clear();
var svg = document.querySelector("#demo");
var tl = new TimelineMax({
  onUpdate: onUpdate
});
var pt = svg.createSVGPoint();
var data = document.querySelector(".tlProgress");
var counter = document.querySelector("#counter");
var ratio = 0.5625;

TweenMax.set("#instructions, #dial", {
  xPercent: -50
});
TweenMax.set("#progressRing", {
  drawSVG: 0
});

tl.to("#masker", 2, {
  attr: {
    r: 2400
  },
  ease: Power2.easeIn
});
tl.reversed(true);

function mouseHandler() {
  tl.reversed(!tl.reversed());
}

function getPoint(evt) {
  pt.x = evt.clientX;
  pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}

function mouseMove(evt) {
  var newPoint = getPoint(evt);
  TweenMax.set("#dot", {
    attr: {
      cx: newPoint.x,
      cy: newPoint.y
    }
  });
  TweenMax.to("#ring, #masker", 0.88, {
    attr: {
      cx: newPoint.x,
      cy: newPoint.y
    },
    ease: Power2.easeOut
  });
}

function onUpdate() {
  var prog = (tl.progress() * 100);
  TweenMax.set("#progressRing", {
    drawSVG: prog + "%"
  });
  counter.textContent = prog.toFixed();
}

function newSize() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  if (w > h * (16 / 9)) {
    TweenMax.set("#demo", {
      attr: {
        width: w,
        height: w * ratio
      }
    });
  } else {
    TweenMax.set("#demo", {
      attr: {
        width: h / ratio,
        height: h
      }
    });
  }
  var data = svg.getBoundingClientRect();
  TweenMax.set("#demo", {
    x: w / 2 - data.width / 2
  });
  TweenMax.set("#demo", {
    y: h / 2 - data.height / 2
  });
}

window.addEventListener("mousedown", mouseHandler);
window.addEventListener("mouseup", mouseHandler);
window.addEventListener("mousemove", mouseMove);

newSize();
window.addEventListener("resize", newSize);

＆＃13;

body {
  padding: 0;
  margin: 0;
  font-family: "Signika", sans-serif;
  background: #262626;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  color: white;
}

p {
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

* {
  box-sizing: border-box;
}

#demo {
  cursor: none;
  position: absolute;
  width: 100%;
  height: 540px;
  transform: matrix(2, 0, 0, 2, 0, 0);
}

#instructions {
  position: absolute;
  padding: 12px;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.75);
  left: 50%;
  transform: translateX(-50%);
  cursor: none;
  padding-top: 100px;
  user-select: none;
  border-radius: 4px;
}

#dial {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.main {
  position: relative;
  height: 540px;
  overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <svg id="demo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="1600" height="900" viewBox="0 0 1600 900">
  <defs>
  <radialGradient id="maskGradient">
    <stop offset="50%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#000"/>
  </radialGradient>
  <mask id="theMask">
   <circle id="masker" r="150" fill="url(#maskGradient)" cx="800" cy="450" />
  </mask>
  </defs> 
    <image id="lines" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/roomSketch.jpg" x="0" y="0" width="1600" height="900" />
    <g id="maskReveal" mask="url(#theMask)" > 
      <image id="regular" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/roomColor.jpg" x="0" y="0" width="1600" height="900" />
    </g>
    <circle id="ring" r="20" fill="none" stroke="#dc143c" stroke-width="2" cx="800" cy="450" />
    <circle id="dot" r="4" fill="#dc143c" cx="800" cy="450" />
</svg>

  <div id="instructions">
    <svg id="dial" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <path id="progressRing" d="M50,10A40,40,0,1,1,10,50,40,40,0,0,1,50,10Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="6"/>
  <circle r="43" fill="none" stroke="#fff" cx="50" cy="50" stroke-width="2" opacity="0.5" />
   <circle r="37" fill="none" stroke="#fff" cx="50" cy="50" stroke-width="2" opacity="0.5"/>
   <text transform="translate(55 56)" text-anchor="start" font-size="20" fill="#fff">%</text>
   <text id="counter" transform="translate(55 56)" text-anchor="end" font-size="20" fill="#fff">0</text>
  </svg>
    <p>Hover mouse to move mask around.</p>
    <p>Hold &amp; release mouse button to expand &amp; contract mask.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;