Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Regression with SVG attribute (fill specified, style empty) #231

Open
mlptownsend opened this issue May 22, 2024 · 0 comments
Open

Regression with SVG attribute (fill specified, style empty) #231

mlptownsend opened this issue May 22, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@mlptownsend
Copy link

Consider this svg:

<svg width="20" height="60">
	<rect width="20" height="20" fill="rgb(0,0,255)" stroke-width="3" stroke="rgb(0,0,0)" style="fill:;stroke:rgb(255,255,255);"></rect>
	<rect y="20" width="20" height="20" fill="rgb(0,0,255)" stroke-width="3" stroke="rgb(0,0,0)" style="fill:rgb(244,58,32);stroke:rgb(255,255,255);"></rect>
	<rect y="40" width="20" height="20" fill="rgb(0,0,255)" stroke-width="3" stroke="rgb(0,0,0)" style="fill:;stroke:rgb(255,255,255);"></rect>
</svg>

Note in the first and third rectangles, the fill attribute is blue, but the style contains fill but it's empty. In a browser, this renders as a blue/red/blue box stack.
image

In 0.5.18, it rendered the same, blue/red/blue. But in 0.5.22.1 and 1.0.0.18, it draws as black/red/black.
image

Sample console app:
To reproduce, put this in Program.cs:

var svgText = @"<svg width=""20"" height=""60"">
	<rect width=""20"" height=""20"" fill=""rgb(0,0,255)"" stroke-width=""3"" stroke=""rgb(0,0,0)"" style=""fill:;stroke:rgb(255,255,255);""></rect>
	<rect y=""20"" width=""20"" height=""20"" fill=""rgb(0,0,255)"" stroke-width=""3"" stroke=""rgb(0,0,0)"" style=""fill:rgb(244,58,32);stroke:rgb(255,255,255);""></rect>
	<rect y=""40"" width=""20"" height=""20"" fill=""rgb(0,0,255)"" stroke-width=""3"" stroke=""rgb(0,0,0)"" style=""fill:;stroke:rgb(255,255,255);""></rect>
</svg>";

using var bmp = new SkiaSharp.SKBitmap(20, 60);
using var canvas = new SkiaSharp.SKCanvas(bmp);

using var ms = new System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(svgText));
ms.Position = 0;
//1.0.0.18 syntax
//using var svg = Svg.Skia.SKSvg.CreateFromStream(ms);

//0.5.18 syntax
using var svg = new Svg.Skia.SKSvg();
svg.Load(ms);

canvas.DrawPicture(svg.Picture);

For 0.5.18, you get blue/red/blue. Change the nuget to 0.5.22.1 and get black/red/black. Change nuget to 1.0.0.18 and switch the svg load lines, and you get black/red/black.

If you change SvgElementFactory.SetAttributes to check if declaration.Original is null or whitespace and skip it, then it draws blue/red/blue again.

if (localName.Equals("style") && !(element is NonSvgElement))
{
    var inlineSheet = stylesheetParser.Parse("#a{" + reader.Value + "}");
    foreach (var rule in inlineSheet.StyleRules) {
        foreach (var declaration in rule.Style) {
            if (!string.IsNullOrWhiteSpace(declaration.Original)) {
                element.AddStyle(declaration.Name, declaration.Original, SvgElement.StyleSpecificity_InlineStyle);
            }
        }
    }
}

Can you think of any reason why changing this would break anything?

@wieslawsoltes wieslawsoltes added the bug Something isn't working label Nov 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants