2012-03-20 25 views
2

いくつかのデータを表示するためのウィジェットを書く際に、SVGイメージの水平領域を「折りたたむ」ことができれば、定義済みのコンテンツ領域が崩壊する。SVG領域を「折りたたむ」

など。 3-4の折りたたみはのように見える終わるでしょう。この

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

のように見えるイメージを与え

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

誰もこれが最善実装する方法についてどのような考えを持っていますか?おそらく1つの "キャンバス"上にレンダリングされ、その後、一連の使用とマスキング/クリップパスによって参照されますか?私は可能な限りメモリのフットプリントを小さくしてこの作業をしようとしているので、第1世代のiPadにあまりオーバーヘッドがありません。

答えて

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/

関連する問題