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
<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>
Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.
New Comment