How to mask an SVG within a div?


Tags: html,css,svg

Problem :

Is there a way for #container to 'contain' the growing 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>

As of now, the SVG grows outside of #container's bounds.



Solution :

If you want to clip overflowing content, use

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>


    CSS Howto..

    How to style a button inside asp dropdown

    how to do conditional css on table row?

    HTML element positioning - How do I have an element always stay in the visible area without javascript

    How can I get good errors from the LESS compiler when integrated in Symfony 2

    CSS: how to set width to children's width?

    Building a DOS-feel script. How to make the command line?

    How do I specify my image's position?

    How to stop jQuery-ui from adding classes to my button

    How to make display:flex work for responsiveness - Bootstrap?

    How to modify CSS to achieve three lines?

    how to show line without space in next line when screen gets smaller?

    How to remove pipe separator of the first list item on the line?

    How to know when you have received an image in the browser?

    how to use 'selector gadget' to scrape data into R?

    How to improve the performance of this CSS animation?

    how to make css dropdown menu a dropup menu

    Django Allauth - How to add custom css class to fields?

    How to see the style of the thumb of range input in Chrome developer tools?

    How to set margin left and right to the center div when using float:left

    How to make multiple divs always fill out the whole browser size?

    CSS: How to change the color of the bottom right square of the scrollbar in webkit?

    How to reset a css animation class using jquery?

    How to reapply .css file after UpdatePanel asynchronous call completed

    How to enable background printing by default using css or javascript?

    How do i apply scroll for long horizontal background image?

    How to select label for=“email” in CSS?

    How to center a Dijit Select widget?

    How to align / valign css-rotated span within its parent div

    How to find all elements with a particular CSS style, without a JS library?

    How to centre fluid image and a caption using CSS Flexbox?