0

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>
user3516328
  • 99
  • 7

1 Answers1

1

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%.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242