Custom SVG Template - Invert background position

[mikestreety]

I am trying to build up a custom SVG template to try and replicate what was generated pre v1. This is because when using ems to position the sprite, all browsers love it except chrome. There was something in the way the older sprite (with <g> instead of <svg> that chrome liked).

So far I have this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="{swidth}" height="{sheight}" preserveAspectRatio="xMaxYMax meet" viewBox="0 0 {swidth} {sheight}">
{#svg}
    <g id="{name}"  transform="translate({positionX},{positionY})">
        {raw|s}
    </g>
{~n}{/svg}
</svg>

All i need to do is invert the polarity of the background positions on the transforms and it works perfectly. I'm struggling to do this - any pointers?

Alternatively, is there anyway I can get it to generate the "old" sprite way?

Thanks as always!

[mikestreety]

As an interim measure, I have done the following (this is for my reference as much as yours! :smiley: )

1. Add the following code after line 219 of https://github.com/shakyShane/gulp-svg-sprites/blob/master/index.js#L219

item.transformX = item.positionX*-1;
item.transformY = item.positionY*-1;

1. Update my template to the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="{swidth}" height="{sheight}" preserveAspectRatio="xMaxYMax meet" viewBox="0 0 {swidth} {sheight}">
{#svg}
    <g id="{name}"  transform="translate({transformX},{transformY})">
        {raw|s}
    </g>
{~n}{/svg}
</svg>

This then means I can use em to work out background size and position and works in all browsers. (Man I hate Safari)

[mikestreety]

Oddly enough - when using this technique, the padding is taken into account as per this issue:

https://github.com/shakyShane/gulp-svg-sprites/issues/37

[mikestreety]

Ignore everything above, thought I had identified the issue. It appears I haven't!

Will look into to see if I can isolate why Safari is such an idiot!