Question

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

<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

使用<< strong>符号>元素

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

在SVG内部转换SVG

1 个答案: