问“折叠”SVG区域
EN

Stack Overflow用户

提问于 2012-03-20 17:24:15

回答 1查看 152关注 0票数 2

在编写用于显示某些数据的小部件时，我突然想到，能够“折叠”SVG图像的水平区域会很有用，这样定义的区域中的内容就会折叠。

例如，给定一个图像，如下所示

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

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

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

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

svg

回答 1

Stack Overflow用户

发布于 2013-12-30 13:04:11

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9784128

复制

相似问题

问“折叠”SVG区域
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问“折叠”SVG区域EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问“折叠”SVG区域
EN