diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index 8eec51fad..e625da360 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -310,6 +310,7 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection, i
width, 0.,
)
}
+
path = polygonEl.Render()
case d2target.BoxArrowhead:
polygonEl := d2themes.NewThemableElement("polygon", inlineTheme)
@@ -317,20 +318,22 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection, i
polygonEl.Fill = d2target.BG_COLOR
polygonEl.Stroke = connection.Stroke
polygonEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
+ polygonEl.Style = fmt.Sprintf("%sstroke-linejoin:miter;", polygonEl.Style)
+ inset := strokeWidth / 2
if isTarget {
polygonEl.Points = fmt.Sprintf("%f,%f %f,%f %f,%f %f,%f",
- 0., 0.,
- 0., height,
- width, height,
- width, 0.,
+ inset, inset,
+ inset, height-inset,
+ width-inset, height-inset,
+ width-inset, inset,
)
} else {
polygonEl.Points = fmt.Sprintf("%f,%f %f,%f %f,%f %f,%f",
- 0., 0.,
- 0., height,
- width, height,
- width, 0.,
+ inset, inset,
+ inset, height-inset,
+ width-inset, height-inset,
+ width-inset, inset,
)
}
path = polygonEl.Render()
diff --git a/e2etests/testdata/stable/box_arrowhead/dagre/sketch.exp.svg b/e2etests/testdata/stable/box_arrowhead/dagre/sketch.exp.svg
index c4f6c682b..d782b540e 100644
--- a/e2etests/testdata/stable/box_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/box_arrowhead/dagre/sketch.exp.svg
@@ -96,7 +96,7 @@
.d2-348696370 .color-AA4{color:#EDF0FD;}
.d2-348696370 .color-AA5{color:#F7F8FE;}
.d2-348696370 .color-AB4{color:#EDF0FD;}
- .d2-348696370 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-348696370);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-348696370);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-348696370);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-348696370);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>abcd box filled-box
+ .d2-348696370 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-348696370);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-348696370);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-348696370);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-348696370);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-348696370);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-348696370);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>abcd box filled-box
diff --git a/e2etests/testdata/stable/box_arrowhead/elk/sketch.exp.svg b/e2etests/testdata/stable/box_arrowhead/elk/sketch.exp.svg
index 13ae05f5f..cce76cce0 100644
--- a/e2etests/testdata/stable/box_arrowhead/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/box_arrowhead/elk/sketch.exp.svg
@@ -96,7 +96,7 @@
.d2-1066721491 .color-AA4{color:#EDF0FD;}
.d2-1066721491 .color-AA5{color:#F7F8FE;}
.d2-1066721491 .color-AB4{color:#EDF0FD;}
- .d2-1066721491 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1066721491);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1066721491);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1066721491);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1066721491);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>abcd box filled-box
+ .d2-1066721491 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1066721491);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1066721491);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1066721491);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1066721491);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1066721491);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1066721491);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>abcd box filled-box