From 51d51709b07830fe21eb6b6fde9073642c0386f4 Mon Sep 17 00:00:00 2001
From: Alexander Wang <alex@terrastruct.com>
Date: Tue, 27 Dec 2022 00:20:49 -0800
Subject: [PATCH] svg works

---
 d2renderers/d2svg/d2svg.go                             | 1 +
 e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg | 5 +++--
 e2etests/testdata/stable/tooltips/elk/sketch.exp.svg   | 5 +++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index 8a0a28546..0c6eecd35 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -847,6 +847,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			targetShape.Pos.Y-tooltipIconLen/2,
 			tooltipIcon,
 		)
+		fmt.Fprintf(writer, `<title>%s</title>`, targetShape.Tooltip)
 	}
 
 	fmt.Fprintf(writer, `</g>`)
diff --git a/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg b/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
index 50bde4261..ef4885b88 100644
--- a/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
@@ -23,12 +23,13 @@ width="314" height="552" viewBox="-100 -100 314 552"><style type="text/css">
 <path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-</g></g><g id="y"><g class="shape" ><rect x="0" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210) scale(2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon">
+</g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210) scale(2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon">
 <path d="M8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667Z" stroke="#DEE1EB" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-</g></g><g id="(x -&gt; y)[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 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3421969999)"/></g><mask id="3421969999" maskUnits="userSpaceOnUse" x="-100" y="-100" width="314" height="552">
+</g><title>Gee, I feel kind of LIGHT in the head now,
+knowing I can't make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[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 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3421969999)"/></g><mask id="3421969999" maskUnits="userSpaceOnUse" x="-100" y="-100" width="314" height="552">
 <rect x="-100" y="-100" width="314" height="552" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg b/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
index c08153e08..6dbb445a1 100644
--- a/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
@@ -23,12 +23,13 @@ width="314" height="552" viewBox="-88 -88 314 552"><style type="text/css">
 <path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-</g></g><g id="y"><g class="shape" ><rect x="12" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="69.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(110 222) scale(2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon">
+</g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="12" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="69.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(110 222) scale(2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon">
 <path d="M8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667Z" stroke="#DEE1EB" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-</g></g><g id="(x -&gt; y)[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 69.000000 140.000000 L 69.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1498654119)"/></g><mask id="1498654119" maskUnits="userSpaceOnUse" x="-100" y="-100" width="314" height="552">
+</g><title>Gee, I feel kind of LIGHT in the head now,
+knowing I can't make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[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 69.000000 140.000000 L 69.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1498654119)"/></g><mask id="1498654119" maskUnits="userSpaceOnUse" x="-100" y="-100" width="314" height="552">
 <rect x="-100" y="-100" width="314" height="552" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[