out-of-flow-svg-root.html (980B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://www.w3.org/TR/SVG2/coords.html"> 4 <link rel="match" href="out-of-flow-svg-root-ref.html"> 5 <style> 6 section { margin-bottom: 10px; } 7 div { background: rgba(255, 0, 0, 0.15) } 8 svg { background: rgba(0, 0, 255, 0.15) } 9 </style> 10 <body> 11 <section> 12 <div style="position: relative; width: 200px; height: 300px; padding: 20px"> 13 <svg style="position: absolute; top: 0; left: 0; right: 0" viewBox="0 0 1 1" 14 xmlns="http://www.w3.org/2000/svg"></svg> 15 </div> 16 </section> 17 <section> 18 <div style="position: relative; width: 300px; height: 200px"> 19 <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 20px;"> 20 <svg style="position: absolute; top: 0; left: 0; height: 100%" viewBox="0 0 1 1" 21 xmlns="http://www.w3.org/2000/svg"></svg> 22 </div> 23 </div> 24 </section> 25 </body> 26 </html>