kwikwag/rect_red.svg

## rect_red.svg
<svg xmlns="http://www.w3.org/2000/svg" height="7mm" width="3mm" version="1.1" viewBox="0 0 3 7">
	<path d="M 0 0 H 3 V 7 H 0 Z" fill="#f04"/>
</svg>

## rect_white.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              rect_white.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## svg_img_tag_sizing.html
<html>
  <head>
    <style type="text/css">
      img { position: absolute; }
      body { background-color: #000; }
    </style>
    <script type="text/javscript">
      window.addEventListener('load', function() {
        function budgeRight() {
           var imgs = document.querySelectorAll('img');
           imgs = Array.prototype.slice.apply(imgs);
           imgs.forEach(function(img) {
              var left = parseInt(img.style.left);

              img.style.left = (left + 1).toString() + "px";
            });
        }

        var interval = null;
        var button = document.getElementById('button-click-me');

        button.addEventListener('click', function() {
          if (interval) {
            clearInterval(interval);
            interval = null;
          }
          else {
            interval = setInterval(budgeRight, 500);
          }
        });
      });
    </script>
  </head>
  <body>
    <img style="zoom: 2.3; left: 41px; top: 25px;" src="rect_white.svg">
    <img style="zoom: 2.3; left: 40px; top: 25px;" src="rect_red.svg">
    <img style="zoom: 2.3; left: 31px; top: 35px;" width="9.35" height="23.35" src="rect_red.svg">
    <img style="zoom: 2.3; left: 32px; top: 35px;" width="9.35" height="23.35" src="rect_white.svg">
    <img style="left: 91px; top: 130px;" width="18" height="42" src="rect_red.svg">
    <img style="left: 94px; top: 130px;" width="18" height="42" src="rect_white.svg">
    <button id="button-click-me">Click me</button>
  </body>
</html>
	<svg xmlns="http://www.w3.org/2000/svg" height="7mm" width="3mm" version="1.1" viewBox="0 0 3 7">
	<path d="M 0 0 H 3 V 7 H 0 Z" fill="#f04"/>
	</svg>
	<html>
	<head>
	<style type="text/css">
	img { position: absolute; }
	body { background-color: #000; }
	</style>
	<script type="text/javscript">
	window.addEventListener('load', function() {
	function budgeRight() {
	var imgs = document.querySelectorAll('img');
	imgs = Array.prototype.slice.apply(imgs);
	imgs.forEach(function(img) {
	var left = parseInt(img.style.left);

	img.style.left = (left + 1).toString() + "px";
	});
	}

	var interval = null;
	var button = document.getElementById('button-click-me');

	button.addEventListener('click', function() {
	if (interval) {
	clearInterval(interval);
	interval = null;
	}
	else {
	interval = setInterval(budgeRight, 500);
	}
	});
	});
	</script>
	</head>
	<body>
	<img style="zoom: 2.3; left: 41px; top: 25px;" src="rect_white.svg">
	<img style="zoom: 2.3; left: 40px; top: 25px;" src="rect_red.svg">
	<img style="zoom: 2.3; left: 31px; top: 35px;" width="9.35" height="23.35" src="rect_red.svg">
	<img style="zoom: 2.3; left: 32px; top: 35px;" width="9.35" height="23.35" src="rect_white.svg">
	<img style="left: 91px; top: 130px;" width="18" height="42" src="rect_red.svg">
	<img style="left: 94px; top: 130px;" width="18" height="42" src="rect_white.svg">
	<button id="button-click-me">Click me</button>
	</body>
	</html>