Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<title>Changing container size of SVG with calc() width/height/x/y/rx/ry on <rect> (reference)</title>
<div id="hcontainer" style="width: 100px; height: 100px; position: absolute">
<svg width="100" height="100">
<rect width="100" height="100"/>
</svg>
<svg width="100" height="100">
<rect width="100" height="100" x="50"/>
</svg>
<svg width="100" height="100">
<rect width="100" height="100" rx="50"/>
</svg>
</div>
<div id="vcontainer" style="width: 100px; height: 100px; position: absolute; left: 116px">
<svg width="100" height="100">
<rect width="100" height="100"/>
</svg>
<svg width="100" height="100">
<rect width="100" height="100" y="50"/>
</svg>
<svg width="100" height="100">
<rect width="100" height="100" ry="50"/>
</svg>
</div>