unique label mask

d2renderers/d2svg/d2svg.go

@@ -346,7 +346,7 @@ func makeLabelMask(labelTL *geo.Point, width, height int) string {
 	)
 }
 
-func drawConnection(writer io.Writer, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape) (labelMask string) {
+func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape) (labelMask string) {
 	fmt.Fprintf(writer, `<g id="%s">`, escapeText(connection.ID))
 	var markerStart string
 	if connection.SrcArrow != d2target.NoArrowhead {
@@ -413,11 +413,12 @@ func drawConnection(writer io.Writer, connection d2target.Connection, markers ma
 		}
 	}
 
-	fmt.Fprintf(writer, `<path d="%s" class="connection" style="fill:none;%s" %s%smask="url(#labels)"/>`,
+	fmt.Fprintf(writer, `<path d="%s" class="connection" style="fill:none;%s" %s%smask="url(#%s)"/>`,
 		pathData(connection, idToShape),
 		connectionStyle(connection),
 		markerStart,
 		markerEnd,
+		labelMaskID,
 	)
 
 	if connection.Label != "" {
@@ -977,6 +978,13 @@ func Render(diagram *d2target.Diagram) ([]byte, error) {
 		}
 	}
 
+	// Mask URLs are global. So when multiple SVGs attach to a DOM, they share
+	// the same namespace for mask URLs.
+	labelMaskID, err := diagram.HashID()
+	if err != nil {
+		return nil, err
+	}
+
 	// SVG has no notion of z-index. The z-index is effectively the order it's drawn.
 	// So draw from the least nested to most nested
 	idToShape := make(map[string]d2target.Shape)
@@ -995,7 +1003,7 @@ func Render(diagram *d2target.Diagram) ([]byte, error) {
 	markers := map[string]struct{}{}
 	for _, obj := range allObjects {
 		if c, is := obj.(d2target.Connection); is {
-			labelMask := drawConnection(buf, c, markers, idToShape)
+			labelMask := drawConnection(buf, labelMaskID, c, markers, idToShape)
 			if labelMask != "" {
 				labelMasks = append(labelMasks, labelMask)
 			}
@@ -1013,8 +1021,8 @@ func Render(diagram *d2target.Diagram) ([]byte, error) {
 
 	if len(labelMasks) > 0 {
 		fmt.Fprint(buf, strings.Join([]string{
-			fmt.Sprintf(`<mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="%d" height="%d">`,
-				w, h,
+			fmt.Sprintf(`<mask id="%s" maskUnits="userSpaceOnUse" x="0" y="0" width="%d" height="%d">`,
+				labelMaskID, w, h,
 			),
 			fmt.Sprintf(`<rect x="0" y="0" width="%d" height="%d" fill="white"></rect>`,
 				w,

d2target/d2target.go

@@ -1,6 +1,9 @@
 package d2target
 
 import (
+	"encoding/json"
+	"fmt"
+	"hash/fnv"
 	"math"
 	"net/url"
 	"strings"
@@ -26,6 +29,20 @@ type Diagram struct {
 	Connections []Connection `json:"connections"`
 }
 
+func (diagram Diagram) HashID() (string, error) {
+	b1, err := json.Marshal(diagram.Shapes)
+	if err != nil {
+		return "", err
+	}
+	b2, err := json.Marshal(diagram.Connections)
+	if err != nil {
+		return "", err
+	}
+	h := fnv.New32a()
+	h.Write(append(b1, b2...))
+	return fmt.Sprint(h.Sum32()), nil
+}
+
 func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) {
 	x1 := int(math.MaxInt64)
 	y1 := int(math.MaxInt64)