html - 如何在 div 中屏蔽 SVG？

Question

#container 有办法“包含”不断增长的 SVG 吗？

function updateTime() { // Update the SVG clock
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hour = (now.getHours() % 12) + min/60;
  var secangle = sec*6;
  var minangle = min*6;
  var hourangle = hour*30;
  // Get SVG elements for the hands of the clock
  var sechand = document.getElementById('secondhand');
  var minhand = document.getElementById("minutehand");
  var hourhand = document.getElementById("hourhand");
  // Set an SVG attribute on them to move them around the clock face
  sechand.setAttribute("transform", "rotate(" + secangle + ",50,50)");
  minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
  hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
  setTimeout(updateTime, 1000);
}
updateTime();
var t = new TimelineMax();
t.to(document.getElementById('clock'), 5, {scale: 2})

html, body {
  width: 100%;
  height: 100%;
}

#container {
  width: 300;
  height: 300px;
  border: 1px solid black;
  box-sizing: border-box;
  background: red;
  z-index: 999;
}

/* These CSS styles all apply to the SVG elements defined below */
#clock {
  /* styles for everything in the clock */
  stroke: black;
  /* black lines */
  stroke-linecap: round;
  /* with rounded ends */
  fill: white;
  /* on a light blue gray background */
}
#face { stroke-width: 3px;}
/* clock face outline */
#ticks { stroke-width: 2; }
/* lines that mark each hour */
#hourhand {stroke-width: 5px;}
/* wide hour hand */
#minutehand {stroke-width: 3px;} /* narrow minute hand */
#secondhand {stroke-width: 1px;}
#numbers {
  /* how to draw the numbers */
  font-family: sans-serif; font-size: 7pt; font-weight: bold;
  text-anchor: middle; stroke: none; fill: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div id="container">
  <svg id="clock" viewBox="0 0 100 100" width="100%" height="100%">
    <circle id="face" cx="50" cy="50" r="45"/> <!-- the clock face -->
    <g id="ticks">
      <!-- 12 hour tick marks -->
      <line x1='50' y1='5.000' x2='50.00' y2='10.00'/>
      <line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/>
      <line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>
      <line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>
      <line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/>
      <line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/>
      <line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/>
      <line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>
      <line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>
      <line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/>
      <line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/>
      <line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/>
    </g>
    <!-- Draw hands pointing straight up. We rotate them in the code. -->
    <g id="hands"> <!-- Add shadows to the hands -->
      <line id="hourhand" x1="50" y1="50" x2="50" y2="24"/>
      <line id="minutehand" x1="50" y1="50" x2="50" y2="20"/>
      <line id="secondhand" x1="50" y1="50" x2="50" y2="16"/>
    </g>
  </svg>
</div>

截至目前，SVG 超出了#container 的范围。

Answer 1

如果你想剪辑溢出的内容，使用

overflow: hidden;

function updateTime() { // Update the SVG clock
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hour = (now.getHours() % 12) + min/60;
  var secangle = sec*6;
  var minangle = min*6;
  var hourangle = hour*30;
  // Get SVG elements for the hands of the clock
  var sechand = document.getElementById('secondhand');
  var minhand = document.getElementById("minutehand");
  var hourhand = document.getElementById("hourhand");
  // Set an SVG attribute on them to move them around the clock face
  sechand.setAttribute("transform", "rotate(" + secangle + ",50,50)");
  minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
  hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
  setTimeout(updateTime, 1000);
}
updateTime();
var t = new TimelineMax();
t.to(document.getElementById('clock'), 5, {scale: 2})

html, body {
  width: 100%;
  height: 100%;
}

#container {
  width: 300;
  height: 300px;
  border: 1px solid black;
  box-sizing: border-box;
  background: red;
  z-index: 999;
  overflow: hidden;
}

/* These CSS styles all apply to the SVG elements defined below */
#clock {
  /* styles for everything in the clock */
  stroke: black;
  /* black lines */
  stroke-linecap: round;
  /* with rounded ends */
  fill: white;
  /* on a light blue gray background */
}
#face { stroke-width: 3px;}
/* clock face outline */
#ticks { stroke-width: 2; }
/* lines that mark each hour */
#hourhand {stroke-width: 5px;}
/* wide hour hand */
#minutehand {stroke-width: 3px;} /* narrow minute hand */
#secondhand {stroke-width: 1px;}
#numbers {
  /* how to draw the numbers */
  font-family: sans-serif; font-size: 7pt; font-weight: bold;
  text-anchor: middle; stroke: none; fill: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div id="container">
  <svg id="clock" viewBox="0 0 100 100" width="100%" height="100%">
    <circle id="face" cx="50" cy="50" r="45"/> <!-- the clock face -->
    <g id="ticks">
      <!-- 12 hour tick marks -->
      <line x1='50' y1='5.000' x2='50.00' y2='10.00'/>
      <line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/>
      <line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>
      <line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>
      <line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/>
      <line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/>
      <line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/>
      <line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>
      <line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>
      <line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/>
      <line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/>
      <line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/>
    </g>
    <!-- Draw hands pointing straight up. We rotate them in the code. -->
    <g id="hands"> <!-- Add shadows to the hands -->
      <line id="hourhand" x1="50" y1="50" x2="50" y2="24"/>
      <line id="minutehand" x1="50" y1="50" x2="50" y2="20"/>
      <line id="secondhand" x1="50" y1="50" x2="50" y2="16"/>
    </g>
  </svg>
</div>