luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

svg works

Browse source
This commit is contained in:
Alexander Wang 2022-12-27 00:20:49 -08:00
parent e4a7bb5215
commit 51d51709b0
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
3 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
d2renderers/d2svg/d2svg.go
View file

@ -847,6 +847,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
targetShape.Pos.Y-tooltipIconLen/2, targetShape.Pos.Y-tooltipIconLen/2,
tooltipIcon, tooltipIcon,
) )
fmt.Fprintf(writer, `<title>%s</title>`, targetShape.Tooltip)
} }
fmt.Fprintf(writer, `</g>`) fmt.Fprintf(writer, `</g>`)

5
e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg vendored
View file

@ -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 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"/> <path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </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.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 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"/> <path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </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> <rect x="-100" y="-100" width="314" height="552" fill="white"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 326 KiB

After

Width:  |  Height:  |  Size: 326 KiB

5
e2etests/testdata/stable/tooltips/elk/sketch.exp.svg vendored
View file

@ -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 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"/> <path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </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.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 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"/> <path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </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> <rect x="-100" y="-100" width="314" height="552" fill="white"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 326 KiB

After

Width:  |  Height:  |  Size: 326 KiB