SVG - <g> opacity is not handled correctly

[artemp]

The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.

(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/opacity)

opacity attribute requires special considerations when processing SVG document.

Example

<svg viewBox="0 0 320 320" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g opacity="0.5">
    <rect x="120" y="120" width="160" height="160" fill="blue"/>
    <circle cx="120" cy="120" r="80" fill="magenta" opacity="1.0" fill-opacity="0.666"/>
  </g>
</svg>

Current (incorrect) rendering

Correct rendering - applying <g> opacity when blending group elements into parent canvas.

[artemp]

https://github.com/mapnik/mapnik/tree/svg-group-render - initial group/element opacity implementation

TODO:

• Unit tests
• Visual tests
• Better names going with svg_group for now.
• Buffers caching logic
• Cairo renderer

[artemp]

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <g stroke-width="20" fill="#ffff00">
    <circle cx="150" cy="125" r="100" fill="#0000ff" stroke="#ff00ff"/>
    <rect x="25" y="100" width="250" height="50" rx="10" ry="10" stroke="#008000"/>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <g opacity="0.5" stroke-width="20" fill="#ffff00">
    <circle cx="150" cy="125" r="100" fill="#0000ff" stroke="#ff00ff"/>
    <rect x="25" y="100" width="250" height="50" rx="10" ry="10" stroke="#008000"/>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">                                                                              
  <g opacity="0.5" stroke-width="20" fill="#ffff00">                                                                                           
    <circle cx="150" cy="125" r="100" fill="#0000ff" stroke="#ff00ff" opacity="0.5"/>                                                          
    <rect x="25" y="100" width="250" height="50" rx="10" ry="10" stroke="#008000" opacity="1"/>                                                
  </g>                                                                                                                                         
</svg> 

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <g opacity="0.5" stroke-width="20" fill="#ffff00">
    <circle cx="150" cy="125" r="100" fill="#0000ff" stroke="#ff00ff"/>
    <rect x="25" y="100" width="250" height="50" rx="10" ry="10" stroke="#008000" opacity="0.5"/>
  </g>
</svg>

[artemp]

`svg2png` -h 
...
--opacity arg         top level opacity (default: 1.0)

svg2png octocat.svg -o

svg2png octocat.svg -o --opacity=0.5

[artemp]

@mathisloge https://github.com/mapnik/mapnik/actions/runs/3553784365/jobs/5969500737
There are some unresolved symbols on Windows, could you take a look?

[mathisloge]

@artemp I needed to export the predefined structs of the cpp.

diff --git a/deps/agg/include/agg_pixfmt_rgba.h b/deps/agg/include/agg_pixfmt_rgba.h
index 40ddf6a07..225fdef69 100644
--- a/deps/agg/include/agg_pixfmt_rgba.h
+++ b/deps/agg/include/agg_pixfmt_rgba.h
@@ -24,6 +24,7 @@
 #ifndef AGG_PIXFMT_RGBA_INCLUDED
 #define AGG_PIXFMT_RGBA_INCLUDED
 
+#include <mapnik/config.hpp>
 #include <cstring>
 #include <cmath>
 #include "agg_basics.h"
@@ -3166,6 +3167,10 @@ private:
 
 
 
+extern template struct MAPNIK_DECL comp_op_rgba_hue<agg::rgba8, agg::order_rgba>;
+extern template struct MAPNIK_DECL comp_op_rgba_saturation<agg::rgba8, agg::order_rgba>;
+extern template struct MAPNIK_DECL comp_op_rgba_color<agg::rgba8, agg::order_rgba>;
+extern template struct MAPNIK_DECL comp_op_rgba_value<agg::rgba8, agg::order_rgba>;

 //-----------------------------------------------------------------------
 typedef blender_rgba<rgba8, order_rgba> blender_rgba32; //----blender_rgba32

[artemp]

@mathisloge Great, thanks!