mchoe / SwiftSVG

A simple, performant, and lightweight SVG parser
Other
1.94k stars 229 forks source link

Fill:"None" not working, fills as black color #171

Open ggua5470 opened 4 years ago

ggua5470 commented 4 years ago

Same as #112

I am using the v2.3.2, and when a svg has fill="none" (e.g. the one below), it fills black color. https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg

I have to add fill-opacity="0" to make it work.

The one without fill="none" works ok: https://raw.githubusercontent.com/efc/SwiftSVG/master/SwiftSVGExamples/hawaiiFlowers.svg

ggua5470 commented 4 years ago

The css color names has "none" for "#00000000", which works fine for parsing the color hex string. https://github.com/mchoe/SwiftSVG/blob/5069fc8e18a73d7694e8d82d14639dc64ace916a/SwiftSVG/SVG/Helpers/cssColorNames.json

But I guess when fill-opacity is not set, its default value is 1 so it overwrites the alpha of the fill color.

zkhalapyan commented 4 years ago

I am hitting the same issue, but it's with all literal colors i.e. fill="white" still will fill with black color, but fill="#FFFFFF" works. Maybe it's not specific to none?

ggua5470 commented 4 years ago

Anyone can look at this issue? I am using Cocoapods with the latest commit but still getting the wrong color when using a named color. I tested the code that reads the namedColor json files and it works, but the parsing of svg seems not using it correctly.

This makes this great library unusable if reading named color is not supported, or we have to manually replace the named color before parsing the svg...

Thanks.

rosoksdev commented 2 years ago

Provided fix in fork, waiting for accepting pull request to origin

rosoksdev commented 2 years ago

Screenshot for approvement

Знімок екрана 2022-06-29 о 13 27 44
ggua5470 commented 2 years ago

Thanks for the update! Looks good with fill="none" (with the sample svg above).
@rosoksdev Did you try fill="white" etc.? I haven't test it. I remember it did not work with the previous version, so I can't use it in production. Will try it myself later.

rosoksdev commented 2 years ago

@ggua5470 I will test if named colors work at all. Fix provides solve only for transparent color, so I will test it on another svgs

rosoksdev commented 2 years ago

I am hitting the same issue, but it's with all literal colors i.e. fill="white" still will fill with black color, but fill="#FFFFFF" works. Maybe it's not specific to none?

CSS named color "none" was not working properly because of the alpha channel this the color - it just not applied to the color, so you technically received "#000000" (black) instead of "#00000000" (transparent). What about another colors: I will check and provide screenshots if something would not work fine

ggua5470 commented 2 years ago

@rosoksdev I am now using your repo, and changed from Pod to Package Manager. All fill="color-name" works, e.g. fill="white", fill="red". BUT it crashes for all svg with fill="none"!!???

It is crashing at Fillable.swift, on line 105: self.svgLayer.fillColor = UIColor(red: colorComponents[0], green: colorComponents[1], blue: colorComponents[2], alpha: opacity).cgColor

the colorComponents has only 2 values. Isn't it set to be UIColor.clear on line 72? 😂

====== Updated 1 ====== I just found out that, it only crashes when fill="none", and fill-opacity="0". If there is no fill-opacity="0", it will work as expected.

====== Updated 2 ====== for path or polyline, 1): fill="none" fill-opacity="any-value" ==> Crash. If no fill-opacity, Not crash. 2): fill="any-color-name" fill-opacity="any-value" ==> Works, if color name is unknown, it is black. All good.

rosoksdev commented 2 years ago

@ggua5470 Thanks for the report, I will look at implementations and will notify you if something changes

rosoksdev commented 2 years ago

@ggua5470, I updated in latest commit, check if everything works

ggua5470 commented 2 years ago

@rosoksdev I did a quick test, it seems working now, at least for my limited use case ^_^ Thanks very much!

rosoksdev commented 2 years ago

@ggua5470, great! Mention me if something will break again :D