svg in webkit cropping content with rotation

dabblet.css

/**
 * svg in webkit cropping content with rotation
 */

.pie {
  width: 152px;
  height: 152px;
  margin: 0 auto;
  background: rgba(0,0,0, .05);
  box-shadow: 0 0 20px rgba(0,0,0, .2) inset;
  border: 10px solid #fff;
  border-radius: 100%;
}
svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: inherit;
}
circle {
  stroke: hsl(200, 10%, 20%);
  stroke-opacity: .2;
  fill: transparent;
  stroke-width: 76;
}
#pie-3 svg {
  -webkit-transform: rotate(120deg);
}

dabblet.html

<div id="pie-1" class="pie">
  <svg>
    <circle r="38" cy="76" cx="76" stroke-dasharray="160" stroke-dashoffset="-160">
  </svg>
</div>
<div id="pie-2" class="pie">
  <svg>
    <circle r="38" cy="76" cx="76" stroke-dasharray="160" stroke-dashoffset="-160" transform="rotate(-90) translate(-152 0)">
  </svg>
</div>
<div id="pie-3" class="pie">
  <svg>
    <circle r="38" cy="76" cx="76" stroke-dasharray="160" stroke-dashoffset="-160">
  </svg>
</div>
<div id="pie-4" class="pie">
  <svg>
    <circle r="38" cy="76" cx="76" stroke-dasharray="160" stroke-dashoffset="-160" transform="rotate(149) translate(-102 -180)">
  </svg>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}