<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350" version="1.1">      <desc>Example opacity01 - opacity property</desc>      <rect x="1" y="1" width="1198" height="348" fill="none" stroke="blue"/>      <rect x="100" y="100" width="1000" height="150" fill="#0000ff"/>      <circle cx="200" cy="100" r="50" fill="red" opacity="1"/>      <circle cx="400" cy="100" r="50" fill="red" opacity=".8"/>      <circle cx="600" cy="100" r="50" fill="red" opacity=".6"/>      <circle cx="800" cy="100" r="50" fill="red" opacity=".4"/>      <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"/>      <g opacity="1">           <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"/>           <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"/>      </g>      <g opacity=".5">           <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"/>           <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"/>      </g>      <g opacity="1">           <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"/>           <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"/>      </g>      <g opacity="1">           <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"/>           <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"/>      </g>      <g opacity=".5">           <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"/>           <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"/>      </g> </svg>

Original SVG source