diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index 9dda6efa4..63c239108 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -17,6 +17,7 @@
 - Fixes attributes being ignored for `sql_table` to `sql_table` connections. [#658](https://github.com/terrastruct/d2/pull/658)
 - Fixes tooltip/link attributes being ignored for `sql_table` and `class`. [#658](https://github.com/terrastruct/d2/pull/658)
 - Fixes arrowheads sometimes appearing broken with sketch on. [#656](https://github.com/terrastruct/d2/pull/656)
+- Bounding box was not account for 3d offsets, which made them look cut off with 0 padding. [#684](https://github.com/terrastruct/d2/pull/684)
 - Fixes code snippets not being tall enough with leading newlines. [#664](https://github.com/terrastruct/d2/pull/664)
 - Opacity was not being applied to labels of shapes (and other edge cases). [#677](https://github.com/terrastruct/d2/pull/677)
 - Icon URLs that needed escaping (e.g. with ampersands) are handled correctly by CLI. [#666](https://github.com/terrastruct/d2/pull/666)
diff --git a/d2target/d2target.go b/d2target/d2target.go
index bf0d90c0e..a95324d91 100644
--- a/d2target/d2target.go
+++ b/d2target/d2target.go
@@ -69,6 +69,11 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) {
 			x2 = go2.Max(x2, targetShape.Pos.X+targetShape.StrokeWidth+targetShape.Width+16)
 		}
 
+		if targetShape.ThreeDee {
+			y1 = go2.Min(y1, targetShape.Pos.Y-THREE_DEE_OFFSET-targetShape.StrokeWidth)
+			x2 = go2.Max(x2, targetShape.Pos.X+THREE_DEE_OFFSET+targetShape.Width+targetShape.StrokeWidth)
+		}
+
 		if targetShape.Label != "" {
 			labelPosition := label.Position(targetShape.LabelPosition)
 			if !labelPosition.IsOutside() {
@@ -90,11 +95,6 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) {
 			x2 = go2.Max(x2, int(labelTL.X)+targetShape.LabelWidth)
 			y2 = go2.Max(y2, int(labelTL.Y)+targetShape.LabelHeight)
 		}
-
-		if targetShape.ThreeDee {
-			y1 = go2.Min(y1, targetShape.Pos.Y-THREE_DEE_OFFSET-targetShape.StrokeWidth)
-			x2 = go2.Max(x2, targetShape.Pos.X+THREE_DEE_OFFSET+targetShape.Width+targetShape.StrokeWidth)
-		}
 	}
 
 	for _, connection := range diagram.Connections {
diff --git a/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg b/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
index 166969dbe..b80e43dda 100644
--- a/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="375" height="584" viewBox="-102 -102 375 584"><style type="text/css">
+width="390" height="599" viewBox="-102 -117 390 599"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -43,8 +43,8 @@ width="375" height="584" viewBox="-102 -102 375 584"><style type="text/css">
 <rect x="0" y="-15" width="186" height="141" fill="white"></rect>
 <path d="M0,0L15,-15L186,-15L186,111L171,126L0,126L0,0L171,0L171,126M171,0L186,-15" style="fill:none;stroke:#0D32B2;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:none;stroke-width:2;" mask="url(#border-mask-rectangle)"/><polygon points="0,0 15,-15 186,-15 186,111 171,126 171,0" style="fill:#cad0f8;stroke:none;stroke-width:2;" mask="url(#border-mask-rectangle)"/><path d="M0,0 L15,-15 L186,-15 L186,111 L171,126 L0,126 L0,0 L171,0 L171,126 M171,0 L186,-15" style="fill:none;stroke:#0D32B2;stroke-width:2;"/></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><defs><mask id="border-mask-square" maskUnits="userSpaceOnUse" x="9" y="211" width="169" height="169">
 <rect x="9" y="211" width="169" height="169" fill="white"></rect>
-<path d="M9,226L24,211L178,211L178,365L163,380L9,380L9,226L163,226L163,380M163,226L178,211" style="fill:none;stroke:#0D32B2;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:none;stroke-width:2;" mask="url(#border-mask-square)"/><polygon points="9,226 24,211 178,211 178,365 163,380 163,226" style="fill:#cad0f8;stroke:none;stroke-width:2;" mask="url(#border-mask-square)"/><path d="M9,226 L24,211 L178,211 L178,365 L163,380 L9,380 L9,226 L163,226 L163,380 M163,226 L178,211" style="fill:none;stroke:#0D32B2;stroke-width:2;"/></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1680066464)"/></g><mask id="1680066464" maskUnits="userSpaceOnUse" x="-100" y="-100" width="375" height="584">
-<rect x="-100" y="-100" width="375" height="584" fill="white"></rect>
+<path d="M9,226L24,211L178,211L178,365L163,380L9,380L9,226L163,226L163,380M163,226L178,211" style="fill:none;stroke:#0D32B2;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:none;stroke-width:2;" mask="url(#border-mask-square)"/><polygon points="9,226 24,211 178,211 178,365 163,380 163,226" style="fill:#cad0f8;stroke:none;stroke-width:2;" mask="url(#border-mask-square)"/><path d="M9,226 L24,211 L178,211 L178,365 L163,380 L9,380 L9,226 L163,226 L163,380 M163,226 L178,211" style="fill:none;stroke:#0D32B2;stroke-width:2;"/></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1680066464)"/></g><mask id="1680066464" maskUnits="userSpaceOnUse" x="-100" y="-100" width="390" height="599">
+<rect x="-100" y="-100" width="390" height="599" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
 .text-bold {
diff --git a/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg b/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
index f7748b812..98293ca5a 100644
--- a/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="375" height="584" viewBox="-90 -90 375 584"><style type="text/css">
+width="390" height="599" viewBox="-90 -105 390 599"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -43,8 +43,8 @@ width="375" height="584" viewBox="-90 -90 375 584"><style type="text/css">
 <rect x="12" y="-3" width="186" height="141" fill="white"></rect>
 <path d="M12,12L27,-3L198,-3L198,123L183,138L12,138L12,12L183,12L183,138M183,12L198,-3" style="fill:none;stroke:#0D32B2;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="12" width="171" height="126" style="fill:#F7F8FE;stroke:none;stroke-width:2;" mask="url(#border-mask-rectangle)"/><polygon points="12,12 27,-3 198,-3 198,123 183,138 183,12" style="fill:#cad0f8;stroke:none;stroke-width:2;" mask="url(#border-mask-rectangle)"/><path d="M12,12 L27,-3 L198,-3 L198,123 L183,138 L12,138 L12,12 L183,12 L183,138 M183,12 L198,-3" style="fill:none;stroke:#0D32B2;stroke-width:2;"/></g><text class="text-bold" x="97.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><defs><mask id="border-mask-square" maskUnits="userSpaceOnUse" x="20" y="223" width="169" height="169">
 <rect x="20" y="223" width="169" height="169" fill="white"></rect>
-<path d="M20,238L35,223L189,223L189,377L174,392L20,392L20,238L174,238L174,392M174,238L189,223" style="fill:none;stroke:#0D32B2;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="20" y="238" width="154" height="154" style="fill:#F7F8FE;stroke:none;stroke-width:2;" mask="url(#border-mask-square)"/><polygon points="20,238 35,223 189,223 189,377 174,392 174,238" style="fill:#cad0f8;stroke:none;stroke-width:2;" mask="url(#border-mask-square)"/><path d="M20,238 L35,223 L189,223 L189,377 L174,392 L20,392 L20,238 L174,238 L174,392 M174,238 L189,223" style="fill:none;stroke:#0D32B2;stroke-width:2;"/></g><text class="text-bold" x="97.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 97.500000 140.000000 L 97.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3466331133)"/></g><mask id="3466331133" maskUnits="userSpaceOnUse" x="-100" y="-100" width="375" height="584">
-<rect x="-100" y="-100" width="375" height="584" fill="white"></rect>
+<path d="M20,238L35,223L189,223L189,377L174,392L20,392L20,238L174,238L174,392M174,238L189,223" style="fill:none;stroke:#0D32B2;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="20" y="238" width="154" height="154" style="fill:#F7F8FE;stroke:none;stroke-width:2;" mask="url(#border-mask-square)"/><polygon points="20,238 35,223 189,223 189,377 174,392 174,238" style="fill:#cad0f8;stroke:none;stroke-width:2;" mask="url(#border-mask-square)"/><path d="M20,238 L35,223 L189,223 L189,377 L174,392 L20,392 L20,238 L174,238 L174,392 M174,238 L189,223" style="fill:none;stroke:#0D32B2;stroke-width:2;"/></g><text class="text-bold" x="97.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 97.500000 140.000000 L 97.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3466331133)"/></g><mask id="3466331133" maskUnits="userSpaceOnUse" x="-100" y="-100" width="390" height="599">
+<rect x="-100" y="-100" width="390" height="599" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
 .text-bold {
diff --git a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
index 90a923b2f..69846de76 100644
--- a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="323" height="580" viewBox="-104 -105 323 580"><style type="text/css">
+width="335" height="580" viewBox="-104 -105 335 580"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -49,8 +49,8 @@ width="323" height="580" viewBox="-104 -105 323 580"><style type="text/css">
 	</filter>
 </defs><g id="x" style='opacity:0.600000'><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y" style='opacity:0.600000'><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="0" y="232" width="129" height="141">
 <rect x="0" y="232" width="129" height="141" fill="white"></rect>
-<path d="M0,247L15,232L129,232L129,358L114,373L0,373L0,247L114,247L114,373M114,247L129,232" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="247" width="114" height="126" style="fill:red;stroke:none;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="0,247 15,232 129,232 129,358 114,373 114,247" style="fill:#cc0000;stroke:none;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M0,247 L15,232 L129,232 L129,358 L114,373 L0,373 L0,247 L114,247 L114,373 M114,247 L129,232" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="57.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 174.400000 57.000000 198.700000 57.000000 243.500000" class="connection" style="fill:none;stroke:green;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#304389475)"/><rect x="34.000000" y="176.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="57.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="304389475" maskUnits="userSpaceOnUse" x="-100" y="-100" width="323" height="580">
-<rect x="-100" y="-100" width="323" height="580" fill="white"></rect>
+<path d="M0,247L15,232L129,232L129,358L114,373L0,373L0,247L114,247L114,373M114,247L129,232" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="247" width="114" height="126" style="fill:red;stroke:none;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="0,247 15,232 129,232 129,358 114,373 114,247" style="fill:#cc0000;stroke:none;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M0,247 L15,232 L129,232 L129,358 L114,373 L0,373 L0,247 L114,247 L114,373 M114,247 L129,232" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="57.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 174.400000 57.000000 198.700000 57.000000 243.500000" class="connection" style="fill:none;stroke:green;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#304389475)"/><rect x="34.000000" y="176.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="57.500000" y="192.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="304389475" maskUnits="userSpaceOnUse" x="-100" y="-100" width="335" height="580">
+<rect x="-100" y="-100" width="335" height="580" fill="white"></rect>
 <rect x="34.000000" y="176.000000" width="47" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {
diff --git a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
index 6a8fec219..7e81374a3 100644
--- a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="323" height="680" viewBox="-93 -93 323 680"><style type="text/css">
+width="336" height="680" viewBox="-93 -93 336 680"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -49,8 +49,8 @@ width="323" height="680" viewBox="-93 -93 323 680"><style type="text/css">
 	</filter>
 </defs><g id="x" style='opacity:0.600000'><g class="shape" filter="url(#shadow-filter)" ><rect x="12" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;stroke-width:5;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y" style='opacity:0.600000'><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="12" y="344" width="129" height="141">
 <rect x="12" y="344" width="129" height="141" fill="white"></rect>
-<path d="M12,359L27,344L141,344L141,470L126,485L12,485L12,359L126,359L126,485M126,359L141,344" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="359" width="114" height="126" style="fill:red;stroke:none;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="12,359 27,344 141,344 141,470 126,485 126,359" style="fill:#cc0000;stroke:none;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M12,359 L27,344 L141,344 L141,470 L126,485 L12,485 L12,359 L126,359 L126,485 M126,359 L141,344" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="69.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 69.000000 141.500000 L 69.000000 355.000000" class="connection" style="fill:none;stroke:green;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#2254812791)"/><rect x="46.000000" y="238.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="69.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="2254812791" maskUnits="userSpaceOnUse" x="-100" y="-100" width="323" height="680">
-<rect x="-100" y="-100" width="323" height="680" fill="white"></rect>
+<path d="M12,359L27,344L141,344L141,470L126,485L12,485L12,359L126,359L126,485M126,359L141,344" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="359" width="114" height="126" style="fill:red;stroke:none;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="12,359 27,344 141,344 141,470 126,485 126,359" style="fill:#cc0000;stroke:none;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M12,359 L27,344 L141,344 L141,470 L126,485 L12,485 L12,359 L126,359 L126,485 M126,359 L141,344" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="69.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 69.000000 141.500000 L 69.000000 355.000000" class="connection" style="fill:none;stroke:green;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#2254812791)"/><rect x="46.000000" y="238.000000" width="47" height="21" style="fill:lavender" /><text class="text-italic" x="69.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">in style</text></g><mask id="2254812791" maskUnits="userSpaceOnUse" x="-100" y="-100" width="336" height="680">
+<rect x="-100" y="-100" width="336" height="680" fill="white"></rect>
 <rect x="46.000000" y="238.000000" width="47" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {
diff --git a/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg b/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
index 4cede3c0a..f80685c1b 100644
--- a/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="353" height="340" viewBox="-107 -107 353 340"><style type="text/css">
+width="368" height="355" viewBox="-107 -122 368 355"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -41,8 +41,8 @@ width="353" height="340" viewBox="-107 -107 353 340"><style type="text/css">
 });
 ]]></script><g id="cube" style='opacity:0.500000'><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="0" y="-15" width="154" height="141">
 <rect x="0" y="-15" width="154" height="141" fill="white"></rect>
-<path d="M0,0L15,-15L154,-15L154,111L139,126L0,126L0,0L139,0L139,126M139,0L154,-15" style="fill:none;stroke:#53C0D8;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="0" width="139" height="126" style="fill:orange;stroke:none;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="0,0 15,-15 154,-15 154,111 139,126 139,0" style="fill:#cc8400;stroke:none;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M0,0 L15,-15 L154,-15 L154,111 L139,126 L0,126 L0,0 L139,0 L139,126 M139,0 L154,-15" style="fill:none;stroke:#53C0D8;stroke-width:7;"/></g><text class="text-bold" x="69.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cube</text></g><mask id="1691738582" maskUnits="userSpaceOnUse" x="-100" y="-100" width="353" height="340">
-<rect x="-100" y="-100" width="353" height="340" fill="white"></rect>
+<path d="M0,0L15,-15L154,-15L154,111L139,126L0,126L0,0L139,0L139,126M139,0L154,-15" style="fill:none;stroke:#53C0D8;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="0" width="139" height="126" style="fill:orange;stroke:none;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="0,0 15,-15 154,-15 154,111 139,126 139,0" style="fill:#cc8400;stroke:none;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M0,0 L15,-15 L154,-15 L154,111 L139,126 L0,126 L0,0 L139,0 L139,126 M139,0 L154,-15" style="fill:none;stroke:#53C0D8;stroke-width:7;"/></g><text class="text-bold" x="69.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cube</text></g><mask id="1691738582" maskUnits="userSpaceOnUse" x="-100" y="-100" width="368" height="355">
+<rect x="-100" y="-100" width="368" height="355" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
 .text-bold {
diff --git a/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg b/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
index 2cfcd8dd6..8f027a31c 100644
--- a/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
@@ -3,7 +3,7 @@
 id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="353" height="340" viewBox="-95 -95 353 340"><style type="text/css">
+width="368" height="355" viewBox="-95 -110 368 355"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -41,8 +41,8 @@ width="353" height="340" viewBox="-95 -95 353 340"><style type="text/css">
 });
 ]]></script><g id="cube" style='opacity:0.500000'><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="12" y="-3" width="154" height="141">
 <rect x="12" y="-3" width="154" height="141" fill="white"></rect>
-<path d="M12,12L27,-3L166,-3L166,123L151,138L12,138L12,12L151,12L151,138M151,12L166,-3" style="fill:none;stroke:#53C0D8;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="12" width="139" height="126" style="fill:orange;stroke:none;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="12,12 27,-3 166,-3 166,123 151,138 151,12" style="fill:#cc8400;stroke:none;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M12,12 L27,-3 L166,-3 L166,123 L151,138 L12,138 L12,12 L151,12 L151,138 M151,12 L166,-3" style="fill:none;stroke:#53C0D8;stroke-width:7;"/></g><text class="text-bold" x="81.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cube</text></g><mask id="1030761998" maskUnits="userSpaceOnUse" x="-100" y="-100" width="353" height="340">
-<rect x="-100" y="-100" width="353" height="340" fill="white"></rect>
+<path d="M12,12L27,-3L166,-3L166,123L151,138L12,138L12,12L151,12L151,138M151,12L166,-3" style="fill:none;stroke:#53C0D8;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="12" width="139" height="126" style="fill:orange;stroke:none;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="12,12 27,-3 166,-3 166,123 151,138 151,12" style="fill:#cc8400;stroke:none;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M12,12 L27,-3 L166,-3 L166,123 L151,138 L12,138 L12,12 L151,12 L151,138 M151,12 L166,-3" style="fill:none;stroke:#53C0D8;stroke-width:7;"/></g><text class="text-bold" x="81.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cube</text></g><mask id="1030761998" maskUnits="userSpaceOnUse" x="-100" y="-100" width="368" height="355">
+<rect x="-100" y="-100" width="368" height="355" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
 .text-bold {