嵌套相對於父

縮放和平移的SVG象徵我要窩了一組SVG五邊形的對方內線，得到這樣的結果：嵌套相對於父

我可以通過手動設置做到這一點相對於外部svg的translate和scale值。

<svg class="defs-only" 
    xmlns="http://www.w3.org/2000/svg" 
    style="display: none;"> 
    <symbol id="pentagon"> 
    <polygon 
points=" 
190.2113,0 
0,138.1966 
72.6542,361.8034 
307.7684,361.8034 
380.4226,138.1966 
"/> 
    </symbol> 
</svg> 

<svg id="1" style="fill:#666" viewBox="0 0 380 362" width="380" height="362"> 
    <use xlink:href="#pentagon"/> 

    <svg id="2" style="fill:#777" viewBox="0 0 380 362" width="380" height="362"> 
    <use xlink:href="#pentagon" transform="translate(72.5 138) scale(0.618 0.618)"/> 

    <svg id="3" style="fill:#888" viewBox="0 0 380 362" width="380" height="362"> 
     <use xlink:href="#pentagon" transform="translate(118 225) scale(0.381924 0.381924)"/> 
    </svg> 
    </svg> 
</svg>

有沒有我可以使用相同的translate和scale值在每個嵌套層，並具有相對於直接父這些值的方法嗎？這是否意味着使用translate的百分比值，這可能嗎？

繼承人a jsFiddle。

語境：最後，我希望用戶能夠拖動形狀，每個移動相對於其父相同的方式，爲了能夠這樣創建圖像：

source

編輯：這裏是final version of the game。

來源

2015-10-04 James Newton

是的。像這樣：

<svg class="defs-only" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    style="display: none;"> 
 
    <symbol id="pentagon"> 
 
    <polygon 
 
points=" 
 
190.2113,0 
 
0,138.1966 
 
72.6542,361.8034 
 
307.7684,361.8034 
 
380.4226,138.1966 
 
"/> 
 
    </symbol> 
 
</svg> 
 

 
<svg viewBox="0 0 380 362" width="380" height="362"> 
 

 
    <g id="pent2and3"> 
 
     <use xlink:href="#pentagon" style="fill:#777"/> 
 
     <use xlink:href="#pentagon" style="fill:#888" transform="translate(72.5 138) scale(0.618 0.618)"/> 
 
    </g> 
 

 
    <g id="pent1"> 
 
     <use xlink:href="#pentagon" style="fill:#666"/> 
 
     <use xlink:href="#pent2and3" transform="translate(72.5 138) scale(0.618 0.618)"/> 
 
    </g> 
 

 
</svg>

來源

2015-10-05 05:39:31

嵌套相對於父

回答

相關問題