support for viewBox attribute

[arielelkin]

Based on @NeedNap's work on #181

[NeedNap]

I think it's a good solution. I'll give it a try as soon as I can

[NeedNap]

You should check this function at line

PocketSVG/Sources/SVGBezierPath.mm

Line 209 in 059f892

- (CGRect) viewBox {

because not all code paths return a value.
You can see it in the "checks" console

[arielelkin]

@NeedNap thanks, that's fixed now.

[arielelkin]

@NeedNap did you have a chance to give this a try?

[arielelkin]

Hello @NeedNap! Could I please get your approval before merging this? I want to make sure it works for you as you requested the original feature.

[NeedNap]

Hi @arielelkin, I think it's ok. You can merge it.

[arielelkin]

This is now in 2.7.0 🎉

[robaho]

Hi @arielelkin Is there any docs on how to use this? I have the following SVG that fails to display.

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-120q-51 0-72.5-45.5T138-250l222-270v-240h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v240l222 270q32 39 10.5 84.5T760-120H200Zm0-80h560L520-492v-268h-80v268L200-200Zm280-280Z"/></svg>

The only way I can get it to work is by changing SVGLayer.m with

        CGRect const pathBounds = path.bounds;
        layer.frame = CGRectApplyAffineTransform(pathBounds, layerTransform);

        CGAffineTransform tx = CGAffineTransformIdentity;
        if(!CGRectEqualToRect(self.viewBox,CGRectNull)) {
            double yScale = size.height /self.viewBox.size.height;
            double xScale = size.width /self.viewBox.size.width;
            double yOffset = (self.viewBox.size.height-size.height)/2;
            double xOffset = (self.viewBox.size.width-size.width)/2;
            tx = CGAffineTransformConcat(CGAffineTransformMakeTranslation(self.viewBox.origin.x,self.viewBox.origin.y*-1),CGAffineTransformMakeScale(xScale,yScale));
        }

        CGAffineTransform const pathTransform = CGAffineTransformConcat(tx,
                                                    CGAffineTransformConcat(CGAffineTransformMakeTranslation(-pathBounds.origin.x,-pathBounds.origin.y),scale));

I can't seem to get it to display in any of the upper layers (e.g. demo apps) with any sort of transform related to the view box.

The SVG displays fine in browser and other online viewers.