「摺疊」SVG區域

在編寫用於顯示某些數據的窗口小部件時，我遇到了這樣的想法，即能夠「摺疊」SVG圖像的水平區域，以便定義的內容地區已崩潰。「摺疊」SVG區域

E.g.因爲像這樣

* 1 2 3 4 5 6 7 8 9 0 * 
*      * 
* ---  ----------- * 
* # #### ############ * 
* %%%%%  %%%%%%% * 
*      * 
***********************

3-4摺疊最終會看起來像一個圖像

* 1 2 5 6 7 8 9 0 * 
*     * 
* --------------- * 
* # ############# * 
* %%%  %%%%%%% * 
*     * 
*******************

沒有人有任何想法，如何這可以實現最好的？可能渲染到一個「畫布」，然後通過一組用途和掩蔽/剪輯路徑引用？我試圖用盡可能低的內存佔用量來完成這項工作，以便它在第一代iPad上沒有太多開銷。

來源

2012-03-20 hirenj

最簡單的方法可能是使用一些嵌套的svg元素來移動你的向量空間。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
    <!-- 
    Move over to the right side of our box. 
    Now the graphic is pinned to the x=100% side of the graphic. 
    --> 
    <svg x='100%' overflow='visible'> 
     <!-- 
     Then move backwards however many pixels you want. 
     Just change the x property... 
     --> 
     <svg x='-500' overflow='visible'> 
      <text y='20'>Blah ditty blah dee blah. SVG for the win!</text> 
     </svg> 
    </svg> 
    <!-- This element stays pinned to the left in the original svg box.--> 
    <rect fill="#333" fill-opacity='.5' width="200" height="100%" mask="url(#m)"/> 
</svg>

http://jsfiddle.net/ddknoll/Ee4Aq/

來源

2013-12-30 05:04:11 DiggityDug

「摺疊」SVG區域

回答

相關問題