“折叠”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区域

回答

相关问题