It appears that Prince is not applying an inline color attribute like `<g color=" … " />` as the `currentColor` to elements within that group element.

I have the following snippet of SVG as part of a chart I'm rendering:

<g class="pct-label" color="hsl(333deg 59% 13%)">
  <rect opacity="0.62" x="150.75" width="148.5" y="15.0" height="465.0"></rect>
  <line x1="150.75" x2="364.25" y1="15.0" y2="15.0"></line>
  <text transform="translate(314.25, 15.0)">
    <tspan class="main-val" dy="1em">42</tspan>
    <tspan x="0" dy="1em">fishes</tspan>
  </text>
</g>

Styled with a compiled-to-CSS version of this LESS source:

.pct-label {
  /*color: red;*/
  rect, text {
    fill: currentColor;
  }
  line {
    stroke: currentColor;
    stroke-width: 2;
  }
}

In browsers the rectangle, line, and text elements are all colored as expected. But Prince is rendering all the elements using a default black stroke and fill instead of the group's assigned color.

If I enable some test CSS to apply the color via `.pct-label { color: red; }` then Prince does apply that color to the nested elements and everything in the chart turns red. But that is a poor solution in my case because the actual color needed for each group isn't really "known" to the CSS which is why it's being rendered in the HTML/SVG code, and based on browser support for this I expect it's standard behavior — i.e. it shouldn't matter whether the `currentColor` comes from a CSS property or from an inline `color=` attribute.

Whoops, I wanted to quick add a reduced test case to help but it revealed a different problem than expected:

<svg id="prince-test" viewBox="0 0 640 480">
  <style>
    #prince-test rect {
      fill: currentColor;
    }
  </style>
  <g color="hsl(10deg 100% 50%)">
    <rect x="20" width="600" y="20" height="440" />
  </g>
</svg>

If I replace the the `<g color="hsl(10deg 100% 50%)">` with `<g color="orange">` it does color the rectangle. So the issue seems to be more with Prince handling of `hsl()` colors which I hadn't searched the forums for and might be a known issue.


UPDATE: fwiw I'm testing against a prince-20211217-linux-generic-aarch64 build which might be somewhere between Prince 14.2 and 14.3, but it looks like `hsl()` has been generally supported since one of the Prince 12 releases https://www.princexml.com/forum/topic/3984/prince-12.1-and-12.2?p=1#19975 and thus it's unclear why my example here doesn't work.

Edited 31 Dec 2022 by natevw

Hello Nate,

Chiming in as we encountered similar issues with color handling in Prince 14. It seems that it won't recognize the color functional notation (where values are separated by space and slashes). We have had good results using this postcss plugin https://www.npmjs.com/package/postcss-color-functional-notation to process CSS colors first when working with Tailwind.

So this should work:

hsl(333deg, 59%, 13%)

Let me know if that helps!