svg icon indicating copy to clipboard operation
svg copied to clipboard

Incorrect colors

Open Gama11 opened this issue 7 years ago • 1 comments

package;

import format.SVG;
import openfl.display.Sprite;
import openfl.Assets;

class Main extends Sprite {
	public function new () {
		super();
		var svg = new SVG(Assets.getText("assets/flixel-different-colors.svg"));
		svg.render(graphics, 0, 0, 150, 150);
	}
}

The result looks like this:

While Inkscape and Chrome render it with the correct colors:

Tested with OpenFL 8.1.1, Lime 6.3.1 and SVG 1.1.2.

SVG asset used.

Gama11 avatar May 26 '18 18:05 Gama11

While Inkscape and Chrome render it with the correct colors

I confirm that Safari, Firefox, and Chrome all seem to agree on rendering this way. It appears that if an attribute (like fill) is specified, and the same value is also customized in style on the same path, then the value in style seems to take precedence.

In the following example (taken from your flixel-different-colors.svg), the fill color should be #ecffff, but we currently give render the fill color as #00cc33 instead.

<path
    d="M 1 1 H 7 V 7 H 1 z"
    fill="#00cc33"
    id="path4"
    style="fill:#ecffff;fill-opacity:1" />

This will likely require changes in SVGData.loadPath() and the style methods it calls to handle styles inherited from the parent element and styles that are defined on the path itself differently.

joshtynjala avatar Feb 18 '25 23:02 joshtynjala