SVG ViewPort

viewport are used to show visible area of inside svg element. or we can say visibility area of SVG is called viewPort. This is logically decide which portion of SVG are visible of at a time. we can set height and width of svg. for example

<svg width="200px" height="200px"></svg>

In this svg we are assign height is 200px and width in 200px. if we are not provide any unit then default unit are px(pixel).

Coordinate units

Name Meaning
px Pixel
cm Centimeter
mm Millimeter
in Inches
pc pica (​1/6 of an inch)
pt pt for point (​1⁄72 of an inch)

Check Yourself

width :

height :

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<level for="svgWidth">width :</level><br>
  <input id="svgWidth" type="text"/><button id="newWidth">Apply</button><br>
<level for="svgHeight">height : </level><br>
<input id="svgHeight" type="text"/><button id="newHeight">Apply</button>
<br>
<svg class="viewPortExample" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="300" >
 
  <style>
  <![CDATA[
  .linkView{
  text-decoration: underline;
    cursor: pointer;
  }
  .viewPortExample{
     background: #76688ed4;
    }
  ]]>
     </style>
  <script>
    <![CDATA[
      $("#newWidth").click(function(){
        if($("#svgWidth").val()!=''){
        $(".viewPortExample").attr("width",$("#svgWidth").val());
        }
      });
        $("#newHeight").click(function(){
                if($("#svgHeight").val()!=''){
        $(".viewPortExample").attr("height",$("#svgHeight").val());
                }
      });
      ]]>
  </script>
</svg>
  </body>
</html>

© 2019, regularcodes.com, All rights reserved