Color alpha channel ignored for text in SVG

0 votes
asked Dec 2, 2020 in Bug by fred (540 points)
edited Dec 2, 2020 by fred

Hello,

It seems that the alpha channel of text color is ignored in the SVG serialization.

For instance, the following example :

@startuml
skinparam shadowing false
note as n
  <color:#FF000020>⬤</color>
  <color:#FF000080>⬤</color>
  <color:#FF0000FF>⬤</color>
end note
state A #FF000020
state B #FF000080
state C #FF0000FF
@enduml

Displays correctly in PNG:

but not in SVG (alpha works for state colors, but not for text color in the note):

Thanks,

Fred

commented Dec 2, 2020 by The-Lu (63,920 points)

Hello,

Here are the images from public PlantUML server:

<<
Displays correctly in PNG:

but not in SVG (alpha works for state colors, but not for text color in the note):

>>

Regards,
Th.

commented Dec 2, 2020 by fred (540 points)
Thanks @The-Lu! I edited my original message to fix the image URLs.
commented May 7, 2021 by bcholmes (120 points)

I notice a similar problem when I try to make the BackgroundColor of my shapes #ffffff00 (using transparent white rather than transparent black because it affects how sprites are handled).

In net.sourceforge.plantuml.net.SvgGraphics, it looks like the fill colour is applied directly to fill attribute of the SVG element. Unfortunately, although Firefox will render this in a way that looks correct, Chrome and Inkscape will not. Perhaps you could tweak the fillMe method as follows:

private void fillMe(Element elt) {
    if (fill.equals("#00000000") == false) {
        double opacity = getOpacity(fill);
        String fillWithoutOpacity = colourWithoutOpacity(fill);
        elt.setAttribute("fill", fillWithoutOpacity);
        if (opacity < 1.0) {
            elt.setAttribute("fill-opacity", String.format("%,.5f", opacity));
        }
    }
}

private String colourWithoutOpacity(String colour) {
    if (colour.matches("#[0-9A-Fa-f]{8}")) {
        return colour.substring(0, 7);
    } else {
        return colour;
    }
}

private double getOpacity(String colour) {
    if (colour.matches("#[0-9A-Fa-f]{8}")) {
        return Integer.parseInt(colour.substring(7), 16) / 255.0;
    } else {
        return 1.0;
    }
}

1 Answer

0 votes
answered Dec 6, 2020 by plantuml (294,960 points)
selected Dec 6, 2020 by fred
 
Best answer
Thanks for the report.

This has been fixed in last official release.
...