Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/coordinate-systems/abspos.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Intrinsic sizing for <svg></title>
<link rel="match" href="support/abspos-ref.html">
<!--
SVG embedded inside html has no intrinsic size, but has intrinsic
aspect ratio. Inline size is computed as available size of containing block,
and block size is derived from aspect ratio.
-->
<style>
#container {
width: 200px;
height: 300px;
position: relative;
border: 10px solid black;
}
#target {
fill: green;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
<div id="container">
<svg id="target" viewBox="0 0 50 50"><circle cx="50%" cy="50%" r="50%"></circle></svg>
</div>