diff --git a/src/pikchr.ts b/src/pikchr.ts
index ca32599..81b1f07 100644
--- a/src/pikchr.ts
+++ b/src/pikchr.ts
@@ -6,12 +6,12 @@ export function post_process_pikchr_svg(svg: string, size?: string) {
 
 	// text
 	for (const [ color, regex ] of Object.entries(text_regex)) {
-		svg = svg.replace(regex, `<text fill="${text_css_vars[color]}"`);
+		svg = svg.replace(regex, (_, $1) => `<text${$1}fill="${text_css_vars[color]}"`);
 	}
 
 	// shape fill
 	for (const [ color, regex ] of Object.entries(shape_fill_regex)) {
-		svg = svg.replace(regex, `<path style="fill:${fill_css_vars[color]}`);
+		svg = svg.replace(regex, (_, $1) => `<path${$1}style="fill:${fill_css_vars[color]}`);
 	}
 
 	// arrow heads
@@ -45,18 +45,18 @@ type CSSVarColor
 	;
 
 const text_regex: Record<CSSVarColor, RegExp> = {
-	black:   /<text fill="rgb\(0,0,0\)"/gi,
-	red:     /<text fill="rgb\(255,0,0\)"/gi,
-	orange:  /<text fill="rgb\(255,165,0\)"/gi,
-	yellow:  /<text fill="rgb\(255,255,0\)"/gi,
-	green:   /<text fill="rgb\(0,128,0\)"/gi,
-	teal:    /<text fill="rgb\(0,128,128\)"/gi,
-	pink:    /<text fill="rgb\(255,192,203\)"/gi,
-	purple:  /<text fill="rgb\(128,0,128\)"/gi,
-	blue:    /<text fill="rgb\(0,0,255\)"/gi,
-	indigo:  /<text fill="rgb\(75,0,130\)"/gi,
-	magenta: /<text fill="rgb\(255,0,255\)"/gi,
-	brown:   /<text fill="rgb\(165,42,42\)"/gi,
+	black:   /<text( | [^>]+ )fill="rgb\(0,0,0\)"/gi,
+	red:     /<text( | [^>]+ )fill="rgb\(255,0,0\)"/gi,
+	orange:  /<text( | [^>]+ )fill="rgb\(255,165,0\)"/gi,
+	yellow:  /<text( | [^>]+ )fill="rgb\(255,255,0\)"/gi,
+	green:   /<text( | [^>]+ )fill="rgb\(0,128,0\)"/gi,
+	teal:    /<text( | [^>]+ )fill="rgb\(0,128,128\)"/gi,
+	pink:    /<text( | [^>]+ )fill="rgb\(255,192,203\)"/gi,
+	purple:  /<text( | [^>]+ )fill="rgb\(128,0,128\)"/gi,
+	blue:    /<text( | [^>]+ )fill="rgb\(0,0,255\)"/gi,
+	indigo:  /<text( | [^>]+ )fill="rgb\(75,0,130\)"/gi,
+	magenta: /<text( | [^>]+ )fill="rgb\(255,0,255\)"/gi,
+	brown:   /<text( | [^>]+ )fill="rgb\(165,42,42\)"/gi,
 };
 
 const line_regex: Record<CSSVarColor, RegExp> = {
@@ -75,18 +75,18 @@ const line_regex: Record<CSSVarColor, RegExp> = {
 };
 
 const shape_fill_regex = {
-	black:    /<path style="fill:rgb\(0,0,0\)/gi,
-	red:      /<path style="fill:rgb\(255,0,0\)/gi,
-	orange:   /<path style="fill:rgb\(255,165,0\)/gi,
-	yellow:   /<path style="fill:rgb\(255,255,0\)/gi,
-	green:    /<path style="fill:rgb\(0,128,0\)/gi,
-	teal:     /<path style="fill:rgb\(0,128,128\)/gi,
-	pink:     /<path style="fill:rgb\(255,192,203\)/gi,
-	purple:   /<path style="fill:rgb\(128,0,128\)/gi,
-	blue:     /<path style="fill:rgb\(0,0,255\)/gi,
-	indigo:   /<path style="fill:rgb\(75,0,130\)/gi,
-	magenta:  /<path style="fill:rgb\(255,0,255\)/gi,
-	brown:    /<path style="fill:rgb\(165,42,42\)/gi,
+	black:    /<path( | [^>]+ )style="fill:rgb\(0,0,0\)/gi,
+	red:      /<path( | [^>]+ )style="fill:rgb\(255,0,0\)/gi,
+	orange:   /<path( | [^>]+ )style="fill:rgb\(255,165,0\)/gi,
+	yellow:   /<path( | [^>]+ )style="fill:rgb\(255,255,0\)/gi,
+	green:    /<path( | [^>]+ )style="fill:rgb\(0,128,0\)/gi,
+	teal:     /<path( | [^>]+ )style="fill:rgb\(0,128,128\)/gi,
+	pink:     /<path( | [^>]+ )style="fill:rgb\(255,192,203\)/gi,
+	purple:   /<path( | [^>]+ )style="fill:rgb\(128,0,128\)/gi,
+	blue:     /<path( | [^>]+ )style="fill:rgb\(0,0,255\)/gi,
+	indigo:   /<path( | [^>]+ )style="fill:rgb\(75,0,130\)/gi,
+	magenta:  /<path( | [^>]+ )style="fill:rgb\(255,0,255\)/gi,
+	brown:    /<path( | [^>]+ )style="fill:rgb\(165,42,42\)/gi,
 }
 
 const arrow_head_regex: Record<CSSVarColor, RegExp> = {