```



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Nested SVG Test</title>
  <style>
    body {
      margin: 1rem;
      font-family: Arial, sans-serif;
      background: #f0f0f0;
    }
    h1 {
      text-align: center;
      margin-bottom: 2rem;
    }
    svg.outer {
      border: 2px solid #333;
      display: block;
      margin: 0 auto 3rem auto;
      background: white;
      width: 90vw;
      height: 60vh;
    }
    svg.nested {
      border: 1px solid #666;
      background: #eee;
      margin: 1rem;
      display: block;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
    }
    .box {
      flex: 1 1 300px;
      max-width: 350px;
      background: white;
      padding: 0.5rem;
      box-shadow: 0 0 6px rgba(0,0,0,0.15);
    }
    .label {
      text-align: center;
      font-weight: bold;
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: #333;
    }
  </style>
</head>
<body>

<h1>Nested SVG Elements with Weird Units and Random ViewBox</h1>

<!-- Outer SVG container -->
<svg class="outer" viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" aria-label="Outer SVG container">
  <!-- Background -->
  <rect width="100%" height="100%" fill="#fafafa" />
  
  <!-- Outer SVG shapes -->
  <circle cx="500" cy="300" r="200" fill="lightblue" opacity="0.3" />
  <text x="500" y="40" text-anchor="middle" font-size="40" fill="#444">Outer SVG Container</text>
  
  <!-- Nested SVG #1: Units 'ch' and 'ex' with viewBox -->
  <svg x="50" y="80" width="30ch" height="15ex" viewBox="0 0 300 150" class="nested" >
    <rect width="100%" height="100%" fill="lightblue" />
    <circle cx="150" cy="75" r="50" fill="orange" />
    <text x="150" y="145" font-size="20" fill="#333" text-anchor="middle" font-family="monospace">30ch × 15ex</text>
  </svg>
  
  <!-- Nested SVG #2: Units vw/vh missing viewBox -->
  <svg x="400" y="80" width="50vw" height="30vh" class="nested" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="pink" />
    <ellipse cx="50%" cy="50%" rx="20%" ry="40%" fill="purple" />
    <text x="50%" y="95%" font-size="12" fill="#222" text-anchor="middle">50vw × 30vh (no viewBox)</text>
  </svg>
  
  <!-- Nested SVG #3: Units % with viewBox -->
  <svg x="50" y="280" width="80%" height="40%" viewBox="0 0 400 200" class="nested" >
    <rect width="100%" height="100%" fill="lightgreen" />
    <line x1="0" y1="0" x2="400" y2="200" stroke="black" stroke-width="5"/>
    <text x="200" y="180" font-size="20" fill="#000" text-anchor="middle">80% × 40% with viewBox</text>
  </svg>

</svg>

<!-- Container outside the main SVG to demonstrate nested independent svgs with weird units -->
<div class="container">

  <!-- SVG 4: Units rem and missing viewBox -->
  <div class="box">
    <svg width="15rem" height="10rem" xmlns="http://www.w3.org/2000/svg" class="nested">
      <polygon points="0,0 150,0 75,130" fill="yellow" stroke="black" stroke-width="3" />
      <text x="75" y="145" font-size="16" text-anchor="middle" fill="#444">15rem × 10rem (no viewBox)</text>
    </svg>
  </div>
  
  <!-- SVG 5: Units vmin and vmax with viewBox -->
  <div class="box">
    <svg width="20vmin" height="20vmax" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg" class="nested">
      <rect x="25" y="50" width="150" height="200" fill="cyan" />
      <text x="100" y="175" font-size="24" text-anchor="middle" fill="navy">20vmin × 20vmax</text>
    </svg>
  </div>
  
  <!-- SVG 6: Mixed units, missing viewBox -->
  <div class="box">
    <svg width="40vmax" height="25ch" class="nested" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50%" cy="50%" r="40%" fill="coral" stroke="maroon" stroke-width="5"/>
      <text x="50%" y="90%" font-size="14" text-anchor="middle" fill="#330000">40vmax × 25ch (no viewBox)</text>
    </svg>
  </div>

</div>

</body>
</html>


```


fuken eyyyyyyyyy