Question

在编写用于显示某些数据的小部件时，我发现这样的想法是能够“折叠”SVG图像的水平区域，以便定义的区域内的内容被折叠。

E.g。给出一个看起来像这样的图像

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

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

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

有没有人对如何最好地实施这一点有任何想法？可能渲染到一个“画布”，然后通过一组用途和屏蔽/剪辑路径引用？我试图以尽可能低的内存占用来完成这项工作，因此它在第一代iPad上没有太多开销。

Answer 1

最简单的方法可能就是使用几个嵌套的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/

“折叠”SVG区域

1 个答案: