fix: Use fill-opacity and stroke-opacity for hex colors with alpha (DenverCoder1#456)

Author: DenverCoder1

src/card.php

@@ -492,6 +492,67 @@ function removeAnimations(string $svg): string
     return $svg;
 }
 
+/**
+ * Convert a color from hex 3/4/6/8 digits to hex 6 digits and opacity (0-1)
+ *
+ * @param string $color The color to convert
+ * @return array<string, string> The converted color
+ */
+function convertHexColor(string $color): array
+{
+    $color = preg_replace("/[^0-9a-fA-F]/", "", $color);
+
+    // double each character if the color is in 3/4 digit format
+    if (strlen($color) === 3) {
+        $chars = str_split($color);
+        $color = "{$chars[0]}{$chars[0]}{$chars[1]}{$chars[1]}{$chars[2]}{$chars[2]}";
+    } elseif (strlen($color) === 4) {
+        $chars = str_split($color);
+        $color = "{$chars[0]}{$chars[0]}{$chars[1]}{$chars[1]}{$chars[2]}{$chars[2]}{$chars[3]}{$chars[3]}";
+    }
+
+    // convert to 6 digit hex and opacity
+    if (strlen($color) === 6) {
+        return [
+            "color" => "#{$color}",
+            "opacity" => 1,
+        ];
+    } elseif (strlen($color) === 8) {
+        return [
+            "color" => "#" . substr($color, 0, 6),
+            "opacity" => hexdec(substr($color, 6, 2)) / 255,
+        ];
+    }
+    throw new AssertionError("Invalid color: " . $color);
+}
+
+/**
+ * Convert transparent hex colors (4/8 digits) in an SVG to hex 6 digits and corresponding opacity attribute (0-1)
+ *
+ * @param string $svg The SVG for the card as a string
+ * @return string The SVG with converted colors
+ */
+function convertHexColors(string $svg): string
+{
+    // convert "transparent" to "#0000"
+    $svg = preg_replace("/(fill|stroke)=['\"]transparent['\"]/m", '\1="#0000"', $svg);
+
+    // convert hex colors to 6 digits and corresponding opacity attribute
+    $svg = preg_replace_callback(
+        "/(fill|stroke)=['\"]#([0-9a-fA-F]{4}|[0-9a-fA-F]{8})['\"]/m",
+        function ($matches) {
+            $attribute = $matches[1];
+            $result = convertHexColor($matches[2]);
+            $color = $result["color"];
+            $opacity = $result["opacity"];
+            return "{$attribute}='{$color}' {$attribute}-opacity='{$opacity}'";
+        },
+        $svg
+    );
+
+    return $svg;
+}
+
 /**
  * Converts an SVG card to a PNG image
  *
@@ -506,15 +567,6 @@ function convertSvgToPng(string $svg): string
     // remove style and animations
     $svg = removeAnimations($svg);
 
-    // replace all fully transparent colors in fill or stroke with "none"
-    // this is a workaround for what seems to be a bug in inkscape where rgba alpha values are ignored
-    // TODO: find a way to make partially transparent colors work (eg. #ffffff50)
-    $svg = preg_replace(
-        "/(fill|stroke)=['\"](?:#[0-9a-fA-F]{6}00|#[0-9a-fA-F]{3}0|transparent)['\"]/m",
-        '\1="none"',
-        $svg
-    );
-
     // escape svg for shell
     $svg = escapeshellarg($svg);
 
@@ -560,8 +612,13 @@ function generateOutput(string|array $output, array $params = null): array
             "body" => json_encode($data),
         ];
     }
-    // Generate SVG card
-    $svg = gettype($output) === "string" ? generateErrorCard($output) : generateCard($output);
+
+    // generate SVG card
+    $svg = gettype($output) === "string" ? generateErrorCard($output, $params) : generateCard($output, $params);
+
+    // some renderers such as inkscape doesn't support transparent colors in hex format, so we need to convert them
+    $svg = convertHexColors($svg);
+
     // output PNG card
     if ($requestedType === "png") {
         try {
@@ -574,14 +631,16 @@ function generateOutput(string|array $output, array $params = null): array
             return [
                 "contentType" => "image/svg+xml",
                 "status" => 500,
-                "body" => generateErrorCard($e->getMessage()),
+                "body" => generateErrorCard($e->getMessage(), $params),
             ];
         }
     }
+
     // remove animations if disable_animations is set
     if (isset($params["disable_animations"]) && $params["disable_animations"] == "true") {
         $svg = removeAnimations($svg);
     }
+
     // output SVG card
     return [
         "contentType" => "image/svg+xml",

tests/RenderTest.php

@@ -150,4 +150,30 @@ public function testDisableAnimations(): void
         $this->assertStringNotContainsString("animation:", $render);
         $this->assertStringNotContainsString("<style>", $render);
     }
+
+    /**
+     * Test alpha in hex colors
+     */
+    public function testAlphaInHexColors(): void
+    {
+        // "tranparent" gets converted to "#0000"
+        $this->testParams["background"] = "transparent";
+        $render = generateOutput($this->testStats, $this->testParams)["body"];
+        $this->assertStringContainsString("fill='#000000' fill-opacity='0'", $render);
+
+        // "#ff000080" gets converted to "#ff0000" and fill-opacity is set to 0.50196078431373
+        $this->testParams["background"] = "ff000080";
+        $render = generateOutput($this->testStats, $this->testParams)["body"];
+        $this->assertStringContainsString("fill='#ff0000' fill-opacity='0.50196078431373'", $render);
+
+        // "#ff0000" gets converted to "#ff0000" and fill-opacity is not set
+        $this->testParams["background"] = "ff0000ff";
+        $render = generateOutput($this->testStats, $this->testParams)["body"];
+        $this->assertStringContainsString("fill='#ff0000' fill-opacity='1'", $render);
+
+        // test stroke opacity
+        $this->testParams["border"] = "00ff0080";
+        $render = generateOutput($this->testStats, $this->testParams)["body"];
+        $this->assertStringContainsString("stroke='#00ff00' stroke-opacity='0.50196078431373'", $render);
+    }
 }