CODEWITHSUNDEEP
csshtmlsvgviewportviewbox
user3516328
user3516328

Reputation: 99

Unable understand how viewbox is working with svg without mentioning viewport i.e. height and width

how the viewbox attribute is working without viewport (i.e. height and width being mentioned),in this case, its taking all the width available, but i don't understand why ? 

<link rel="stylesheet" type="text/css" href="css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">     </script>
</head>

<body>


<div>
<svg  viewBox="0 0 800 600" style="border:1px solid #000;">

<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top" stroke="red" stroke-width="3"fill="none"></path>

<path d="M300,320 L540,320" id="middle" stroke="red"></path>

<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(0, 635) scale(1, -1) " stroke="red" stroke-width="3" fill="none"></path>

</svg>
</div>


<script src="js.js"></script>
</body>
</html>

Upvotes: 0

Views: 505

Answers (1)

Robert Longson
Robert Longson

Reputation: 124229

If there is a viewBox the svg element's lacuna (default) values are used if width and height attributes (or styles) are absent. The lacuna values for width and height are 100%.

Upvotes: 1

Related Questions