I have been scratching my head and struggling to animate a svg symbol which i would like to rotate and scale from where it is placed on the canvas. Instead of their individual centres, the symbols are all taking the canvas `(0, 0)` as the origin or another location. 

[The SVG in action](https://madeinthemoon.co.uk/wp-content/uploads/2019/07/svgtest.svg)

Basically I would like one instance of `<use>` to rotate back and forth, another `<use>` to scale up and down and a third `<use>` to do both rotate and scale **in it's location**. Eventually I will have around 20 `<use>` with different locations / colours / rotations / scales of the same `<symbol>`.

I definetly don't want to use JavaScript or external resources, just a simple bit of inline? svg code.

And as you can probably see in the code, I am fumbling around, I am still very new to coding.

Unsuccessfully atempts using viewBox, transform, translate probably in the wrong part of the code.

```html
  <?xml version="1.0" encoding="UTF-8"?>
    <!-- Creator: Made in the Moon -->
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
    <style type="text/css">
    <![CDATA[

    .fily {fill:#FFDA03}
    .filb {fill:#224D8F}
    .filp {fill:#3F2A56}

    .yrot {transform-origin: 15% 11%;}

    .sp {animation-name: sp; animation-timing-function: linear; animation-duration: 5s; animation-iteration-count: infinite; transform-origin: center; }
    @keyframes sp {
    0%{transform: scale(0.9);}
    50%{transform: scale(1.3);}
    100%{transform: scale(0.9);}
    }

    .ro {animation-name: ro; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
    @keyframes ro {
    0%{transform: rotate(0deg); }
    50%{transform: rotate(90deg); }
    100%{transform: rotate(0deg); }
    }

    .rotateandscale
    {animation-name: rotateandscale; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
    @keyframes rotateandscale {
    0%{transform: rotate(0deg) scale(0.9);}
    50%{transform: rotate(20deg) scale(1.3);}
    100%{transform: rotate(0deg) scale(0.9);}
    }

    ]]></style>
    <symbol id="grow" viewBox="0 0 1000 1000" preserveAspectRatio="none">
    <path d="M315 155l91 -34c57,20 131,20 188,0l91 34 126 60c3,1 2,0 2,3l-32 131c0,1 0,1 -1,1l-65 -2c-22,118 -13,236 -9,355 -42,48 -78,106 -110,175 -66,3 -126,3 -192,0 -32,-69 -68,-127 -110,-175 4,-119 13,-237 -9,-355l-65 2c-1,0 -1,0 -1,-1l-32 -131c0,-3 -1,-2 2,-3l126 -60z"/>
    </symbol></defs>

    <use id="p-grow" viewBox="0 0 160 160" xlink:href="#grow" class="filp ro" x="65" y="65" height="160" width="160"/>

    <use id="b-grow" xlink:href="#grow" class="filb sp" x="-100" y="340" height="80%" width="80%"/>

    <use id="y-grow" xlink:href="#grow" class="fily rotateandscale" x="550" y="100" height="50%" width="50%"/>

    </svg>
```

Each instance of `<use>` should individually scale and rotate from the centre of there location on the canvas.