&引用；“折叠”；SVG区域

在编写一个用于显示某些数据的小部件时，我突然想到，能够“折叠”SVG图像的水平区域将非常有用，这样定义区域内的内容将被折叠

例如，给定一个像这样的图像

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

3-4的折叠最终看起来像

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

---

有人对如何最好地实现这一点有什么想法吗？是否可能渲染到一个“画布”，然后通过一组使用和遮罩/剪辑路径引用？我也在尽可能地减少内存占用，这样在第1代iPad上就不会有太多开销。

最简单的方法可能是使用一些嵌套的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>

胡说八道，胡说八道。为了胜利！