ellipse-calc-dynamic-viewport-ref.html

Enable keyboard shortcuts

<!doctype html>

<title>Changing container size of SVG with calc() cx/cy/rx/ry on &lt;ellipse> (reference)</title>

<div id="hcontainer" style="width: 100px; height: 100px; position: absolute">

  <svg width="100" height="100">

    <ellipse cy="50" rx="100" ry="50"/>

  </svg>

  <svg width="100" height="100">

    <ellipse cx="50" cy="50" rx="50" ry="50"/>

  </svg>

</div>

<div id="vcontainer" style="width: 100px; height: 100px; position: absolute; left: 116px">

  <svg width="100" height="100">

    <ellipse cx="50" rx="50" ry="100"/>

  </svg>

  <svg width="100%" height="100%">

    <ellipse cx="50" cy="50" rx="50" ry="50"/>

  </svg>

</div>