在svg中转换svg

Question

好的，我有两个例子。首先是单个svg，我对其应用转换以水平翻转svg：

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)">

第二个是相同的svg，只是现在它被包装在另一个svg中(使用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)">

现在，如果我将相同的转换应用于内部svg，则不会应用转换。有没有想过为什么转换在示例1中有效，而在示例2中不起作用？我在这个问题上有点纠结，所以一些帮助可能会有用。

Answer 1

使用<symbol>元素

<!-- 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>