
<html>
<style>
div {
  display: inline-block;
}

svg {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
<body>
  <div style="opacity: 0.5;">
    <svg>
      <rect width="100" height="100"></rect>
    </svg>
  </div>

  <div style="opacity: 0.5; -webkit-transform: translateZ(0);">
    <svg>
      <rect width="100" height="100"></rect>
    </svg>
  </div>

  <div>
    <svg style="opacity: 0.5;">
      <rect width="100" height="100"></rect>
    </svg>
  </div>

  <div>
    <svg style="opacity: 0.5; -webkit-transform: translateZ(0);">
      <rect width="100" height="100"></rect>
    </svg>
  </div>
</body>
</html>