SVG appears before transform

<style>

body { text-align: center;  margin: auto; }
        p.source { font-style: italic; }
        a { color: blue; }

svg {
            display: block;
            margin: auto;
        }

rect {
            fill: none;
            stroke: #fff;
        }

.axis path, .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

.bucket {
            float:left;
        }
        #bucket1, #bucket2, #bucket3 {
            width: 240px;
            height: 400px;
            margin: 30px;
            background: #bbb;
        }

</style> 
</head>
<body>

<div class="bucket">
		<h3>
			In Progress
		</h3>
			<div height="500px" width="240px" id="bucket1">
				<svg>
					<g>
						<g transform="translate(115,0)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Joe" height="71" width="56">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="36" x="28.5">
								T-024
							</text>
						</g>
						<g transform="translate(172,0)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="71" width="67">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="36" x="34">
								T-015
							</text>
						</g>
						<g transform="translate(0,21)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="34" width="57">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="17.5" x="29">
								T-025
							</text>
						</g>
						<g transform="translate(0,0)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="20" width="57">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="10.5" x="29">
								T-052
							</text>
						</g>
						<g transform="translate(0,98)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="41" width="57">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="21" x="29">
								T-060
							</text>
						</g>
						<g transform="translate(58,127)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="69" width="103">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="35" x="52">
								T-062
							</text>
						</g>
						<g transform="translate(162,72)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="124" width="77">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="62.5" x="39">
								T-067
							</text>
						</g>
						<g transform="translate(0,140)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="56" width="57">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="28.5" x="29">
								T-068
							</text>
						</g>
						<g transform="translate(58,0)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="71" width="56">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="36" x="28.5">
								T-095
							</text>
						</g>
						<g transform="translate(58,72)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Joe" height="54" width="103">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="27.5" x="52">
								T-0103
							</text>
						</g>
						<g transform="translate(0,56)" class="cell">
							<rect style="fill: rgb(49, 130, 189);" class="cell Joe" height="41" width="57">
							</rect>
							<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="21" x="29">
								T-0145
							</text>
						</g>
					</g>
				</svg>
			</div>
	</div>

</body>
</html>