Transform svg inside svg

Question

Ok so I got two examples. First is a single svg to which I apply a transform to flip the svg horizontally:

http://jsfiddle.net/p3L95rcb/

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 109.55 40.51" transform="scale(-1,1)">

Second is the same svg, only now it's wrapped inside another svg (created with snap svg):

http://jsfiddle.net/dFTtd/650/

<svg id="combinationDrawSvg" width="100%" height="254" class="overlap-annotations"><g transform="matrix(1,0,0,1,0,0)"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.55 40.51" transform="scale(-1,1)">

Now if I apply the same transform to the inner svg, the transform is not applied. Any thought on why the transform works in example 1 and it does not in example 2? I'm kinda stuck on this one, so some help maybe useful.

Answer 1

use < symbol > element

<!-- id with lowercase -->
<symbol id="layer_1" data-name="Layer 1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 109.55 40.51">
    <!-- your paths -->
</symbol>

<g transform="matrix(1,0,0,1,0,0)">
    <use xlink:href="#layer_1" x="0" y="0" transform-origin="50% 50%" transform="scale(-1, 1)" />
</g>