Merge branch 'master' into png-img

d2renderers/d2svg/d2svg.go

@@ -509,6 +509,91 @@ func defineShadowFilter(writer io.Writer) {
 </defs>`)
 }
 
+func render3dRect(targetShape d2target.Shape) string {
+	moveTo := func(p d2target.Point) string {
+		return fmt.Sprintf("M%d,%d", p.X+targetShape.Pos.X, p.Y+targetShape.Pos.Y)
+	}
+	lineTo := func(p d2target.Point) string {
+		return fmt.Sprintf("L%d,%d", p.X+targetShape.Pos.X, p.Y+targetShape.Pos.Y)
+	}
+
+	// draw border all in one path to prevent overlapping sections
+	var borderSegments []string
+	borderSegments = append(borderSegments,
+		moveTo(d2target.Point{X: 0, Y: 0}),
+	)
+	for _, v := range []d2target.Point{
+		{X: threeDeeOffset, Y: -threeDeeOffset},
+		{X: targetShape.Width + threeDeeOffset, Y: -threeDeeOffset},
+		{X: targetShape.Width + threeDeeOffset, Y: targetShape.Height - threeDeeOffset},
+		{X: targetShape.Width, Y: targetShape.Height},
+		{X: 0, Y: targetShape.Height},
+		{X: 0, Y: 0},
+		{X: targetShape.Width, Y: 0},
+		{X: targetShape.Width, Y: targetShape.Height},
+	} {
+		borderSegments = append(borderSegments, lineTo(v))
+	}
+	// move to top right to draw last segment without overlapping
+	borderSegments = append(borderSegments,
+		moveTo(d2target.Point{X: targetShape.Width, Y: 0}),
+	)
+	borderSegments = append(borderSegments,
+		lineTo(d2target.Point{X: targetShape.Width + threeDeeOffset, Y: -threeDeeOffset}),
+	)
+	border := targetShape
+	border.Fill = "none"
+	borderStyle := shapeStyle(border)
+	renderedBorder := fmt.Sprintf(`<path d="%s" style="%s"/>`,
+		strings.Join(borderSegments, " "), borderStyle)
+
+	// create mask from border stroke, to cut away from the shape fills
+	maskID := fmt.Sprintf("border-mask-%v", escapeText(targetShape.ID))
+	borderMask := strings.Join([]string{
+		fmt.Sprintf(`<defs><mask id="%s" maskUnits="userSpaceOnUse" x="%d" y="%d" width="%d" height="%d">`,
+			maskID, targetShape.Pos.X, targetShape.Pos.Y-threeDeeOffset, targetShape.Width+threeDeeOffset, targetShape.Height+threeDeeOffset,
+		),
+		fmt.Sprintf(`<rect x="%d" y="%d" width="%d" height="%d" fill="white"></rect>`,
+			targetShape.Pos.X, targetShape.Pos.Y-threeDeeOffset, targetShape.Width+threeDeeOffset, targetShape.Height+threeDeeOffset,
+		),
+		fmt.Sprintf(`<path d="%s" style="%s;stroke:#000;fill:none;opacity:1;"/></mask></defs>`,
+			strings.Join(borderSegments, ""), borderStyle),
+	}, "\n")
+
+	// render the main rectangle without stroke and the border mask
+	mainShape := targetShape
+	mainShape.Stroke = "none"
+	mainRect := fmt.Sprintf(`<rect x="%d" y="%d" width="%d" height="%d" style="%s" mask="url(#%s)"/>`,
+		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(mainShape), maskID,
+	)
+
+	// render the side shapes in the darkened color without stroke and the border mask
+	var sidePoints []string
+	for _, v := range []d2target.Point{
+		{X: 0, Y: 0},
+		{X: threeDeeOffset, Y: -threeDeeOffset},
+		{X: targetShape.Width + threeDeeOffset, Y: -threeDeeOffset},
+		{X: targetShape.Width + threeDeeOffset, Y: targetShape.Height - threeDeeOffset},
+		{X: targetShape.Width, Y: targetShape.Height},
+		{X: targetShape.Width, Y: 0},
+	} {
+		sidePoints = append(sidePoints,
+			fmt.Sprintf("%d,%d", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y),
+		)
+	}
+	darkerColor, err := color.Darken(targetShape.Fill)
+	if err != nil {
+		darkerColor = targetShape.Fill
+	}
+	sideShape := targetShape
+	sideShape.Fill = darkerColor
+	sideShape.Stroke = "none"
+	renderedSides := fmt.Sprintf(`<polygon points="%s" style="%s" mask="url(#%s)"/>`,
+		strings.Join(sidePoints, " "), shapeStyle(sideShape), maskID)
+
+	return borderMask + mainRect + renderedSides + renderedBorder
+}
+
 func drawShape(writer io.Writer, targetShape d2target.Shape) error {
 	fmt.Fprintf(writer, `<g id="%s">`, escapeText(targetShape.ID))
 	tl := geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y))
@@ -561,50 +646,15 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error {
 	// TODO should standardize "" to rectangle
 	case d2target.ShapeRectangle, "":
 		if targetShape.ThreeDee {
-			darkerColor, err := color.Darken(targetShape.Fill)
+			fmt.Fprint(writer, render3dRect(targetShape))
-			if err != nil {
+		} else {
-				darkerColor = targetShape.Fill
+			if targetShape.Multiple {
+				fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
+					targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height, style)
 			}
-			sideShape := targetShape
-			sideShape.Fill = darkerColor
-			sideStyle := shapeStyle(sideShape)
-
-			var topPolygonPoints []string
-			for _, v := range []d2target.Point{
-				{X: 0, Y: 0},
-				{X: threeDeeOffset, Y: -1 * threeDeeOffset},
-				{X: targetShape.Width + threeDeeOffset, Y: -1 * threeDeeOffset},
-				{X: targetShape.Width, Y: 0},
-				{X: 0, Y: 0},
-			} {
-				topPolygonPoints = append(topPolygonPoints,
-					fmt.Sprintf("%d,%d ", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y),
-				)
-			}
-			fmt.Fprintf(writer, `<polygon points="%s" style="%s"/>`,
-				strings.Join(topPolygonPoints, ""), sideStyle)
-
-			var rightPolygonPoints []string
-			for _, v := range []d2target.Point{
-				{X: targetShape.Width, Y: 0},
-				{X: targetShape.Width + threeDeeOffset, Y: -1 * threeDeeOffset},
-				{X: targetShape.Width + threeDeeOffset, Y: targetShape.Height - threeDeeOffset},
-				{X: targetShape.Width, Y: targetShape.Height},
-			} {
-				rightPolygonPoints = append(rightPolygonPoints,
-					fmt.Sprintf("%d,%d ", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y),
-				)
-			}
-			fmt.Fprintf(writer, `<polygon points="%s" style="%s"/>`,
-				strings.Join(rightPolygonPoints, ""), sideStyle)
-		}
-		if targetShape.Multiple {
 			fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
-				targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height, style)
+				targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style)
 		}
-		fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
-			targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style)
-
 	case d2target.ShapeText, d2target.ShapeCode:
 	default:
 		if targetShape.Multiple {

e2etests/stable_test.go

@@ -913,7 +913,7 @@ y: {
     opacity: 0.6
     fill: red
     3d: true
-		stroke: black
+    stroke: black
   }
 }
 
@@ -986,6 +986,20 @@ sugar -> c
 c: mixed together
 
 c -> solution: we get
+`,
+		},
+		{
+			name: "transparent_3d",
+			script: `
+cube: {
+	style: {
+		3d: true
+		opacity: 0.5
+		fill: orange
+		stroke: "#53C0D8"
+		stroke-width: 7
+	}
+}
 `,
 		},
 	}

e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg

@@ -14,7 +14,11 @@ width="371" height="580" viewBox="-100 -100 371 580"><style type="text/css">
 }
 
 ]]>
-</style><g id="rectangle"><g class="shape" ><polygon points="0,0 15,-15 186,-15 171,0 0,0 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="171,0 186,-15 186,111 171,126 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;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" ><polygon points="9,226 24,211 178,211 163,226 9,226 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="163,226 178,211 178,365 163,380 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;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;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="0" y="-15" width="186" height="141">
+<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;opacity:1.000000;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;opacity:1.000000;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;opacity:1.000000;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;opacity:1.000000;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;opacity:1.000000;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;opacity:1.000000;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;opacity:1.000000;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;opacity:1.000000;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;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/square_3d/elk/sketch.exp.svg

@@ -14,7 +14,11 @@ width="625" height="354" viewBox="-88 -88 625 354"><style type="text/css">
 }
 
 ]]>
-</style><g id="rectangle"><g class="shape" ><polygon points="12,26 27,11 198,11 183,26 12,26 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="183,26 198,11 198,137 183,152 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="12" y="26" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.500000" y="92.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><polygon points="283,12 298,-3 452,-3 437,12 283,12 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="437,12 452,-3 452,151 437,166 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="283" y="12" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="360.000000" y="92.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 185.000000 89.000000 L 279.000000 89.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
+</style><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="12" y="11" width="186" height="141">
+<rect x="12" y="11" width="186" height="141" fill="white"></rect>
+<path d="M12,26L27,11L198,11L198,137L183,152L12,152L12,26L183,26L183,152M183,26L198,11" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="26" width="171" height="126" style="fill:#F7F8FE;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><polygon points="12,26 27,11 198,11 198,137 183,152 183,26" style="fill:#cad0f8;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><path d="M12,26 L27,11 L198,11 L198,137 L183,152 L12,152 L12,26 L183,26 L183,152 M183,26 L198,11" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="97.500000" y="92.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="283" y="-3" width="169" height="169">
+<rect x="283" y="-3" width="169" height="169" fill="white"></rect>
+<path d="M283,12L298,-3L452,-3L452,151L437,166L283,166L283,12L437,12L437,166M437,12L452,-3" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="283" y="12" width="154" height="154" style="fill:#F7F8FE;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-square)"/><polygon points="283,12 298,-3 452,-3 452,151 437,166 437,12" style="fill:#cad0f8;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-square)"/><path d="M283,12 L298,-3 L452,-3 L452,151 L437,166 L283,166 L283,12 L437,12 L437,166 M437,12 L452,-3" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="360.000000" y="92.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 185.000000 89.000000 L 279.000000 89.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/stylish/dagre/sketch.exp.svg

@@ -22,7 +22,9 @@ width="314" height="552" viewBox="-100 -100 314 552"><style type="text/css">
 		<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
 		<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
 	</filter>
-</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;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"><g class="shape" ><polygon points="0,226 15,211 129,211 114,226 0,226 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><polygon points="114,226 129,211 129,337 114,352 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><rect x="0" y="226" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><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 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /></g><style type="text/css"><![CDATA[
+</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;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"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="0" y="211" width="129" height="141">
+<rect x="0" y="211" width="129" height="141" fill="white"></rect>
+<path d="M0,226L15,211L129,211L129,337L114,352L0,352L0,226L114,226L114,352M114,226L129,211" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="226" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="0,226 15,211 129,211 129,337 114,352 114,226" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M0,226 L15,211 L129,211 L129,337 L114,352 L0,352 L0,226 L114,226 L114,352 M114,226 L129,211" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><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 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/stylish/elk/sketch.exp.svg

@@ -22,7 +22,9 @@ width="527" height="326" viewBox="-88 -88 527 326"><style type="text/css">
 		<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
 		<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
 	</filter>
-</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="12" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;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"><g class="shape" ><polygon points="225,12 240,-3 354,-3 339,12 225,12 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><polygon points="339,12 354,-3 354,123 339,138 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><rect x="225" y="12" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text class="text-bold" x="282.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><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 128.500000 75.000000 L 221.000000 75.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /></g><style type="text/css"><![CDATA[
+</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="12" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;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"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="225" y="-3" width="129" height="141">
+<rect x="225" y="-3" width="129" height="141" fill="white"></rect>
+<path d="M225,12L240,-3L354,-3L354,123L339,138L225,138L225,12L339,12L339,138M339,12L354,-3" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="225" y="12" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="225,12 240,-3 354,-3 354,123 339,138 339,12" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M225,12 L240,-3 L354,-3 L354,123 L339,138 L225,138 L225,12 L339,12 L339,138 M339,12 L354,-3" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="282.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><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 128.500000 75.000000 L 221.000000 75.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /></g><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/transparent_3d/dagre/board.exp.json

@@ -0,0 +1,44 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "cube",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 139,
+      "height": 126,
+      "level": 1,
+      "opacity": 0.5,
+      "strokeDash": 0,
+      "strokeWidth": 7,
+      "borderRadius": 0,
+      "fill": "orange",
+      "stroke": "#53C0D8",
+      "shadow": false,
+      "3d": true,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "cube",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 39,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER"
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/stable/transparent_3d/elk/board.exp.json

@@ -0,0 +1,44 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "cube",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 139,
+      "height": 126,
+      "level": 1,
+      "opacity": 0.5,
+      "strokeDash": 0,
+      "strokeWidth": 7,
+      "borderRadius": 0,
+      "fill": "orange",
+      "stroke": "#53C0D8",
+      "shadow": false,
+      "3d": true,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "cube",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 39,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER"
+    }
+  ],
+  "connections": []
+}