KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: SVG Groups, SVG_SET_TRANSFORM_TRANSLATE, and animation
PRODUCT: 4D | VERSION: 11.4 | PLATFORM: Mac & Win
Published On: May 28, 2009

When wanting to move a group of SVG objects in unison, there are three courses of action for the 4D developer:


The first code snippet creates two rectangles with background colors and a bit of text in white. Each group is comprised of two SVG objects, a Rectangle and a Text Area. The fill color is based on the width of the object as demonstrated by the integration of the 4D Choose command into establishing attributes of an SVG object. IDs are given to each object so they can be addressed in code later. This code snippet also demonstrates how to assign a primary and secondary font to a text object.

$Gp_T:=SVG_New_group (SVG_Ref_A16;"MoveableRectsWithText")
$Cell_Ref_T:=SVG_New_rect ($Gp_T;$Left_L+2;$Top_L;$TBoxWidth_L;$RowHeight_L;0;0;
        "white";Choose($Max_L<12;"url(#TP_Blue_BG)";"url(#TP_Black_BG)");2)
SVG_SET_ID ($Cell_Ref_T;"AA")
$Cell_Ref_T:=SVG_New_textArea ($Gp_T;"aa";$Left_L+2;$Top_L+6;$TBoxWidth_L;
        $RowHeight_L-4;"lucdia grande, verdana";13;Bold ;Center )
SVG_SET_ID ($Cell_Ref_T;"AA_txt")
SVG_SET_FONT_COLOR ($Cell_Ref_T;"White")

$Left_L:=$Left_L+$TBoxWidth_L
$Cell_Ref_T:=SVG_New_rect ($Gp_T;$Left_L+2;$Top_L;$TBoxWidth_L;$RowHeight_L ; 0;0;
        "white"; Choose($Max_L>=12;"url(#TP_Blue_BG)";"url(#TP_Black_BG)");2)
SVG_SET_ID ($Cell_Ref_T;"BB")
$Cell_Ref_T:=SVG_New_textArea ($Gp_T;"bb";$Left_L+2;$Top_L+6;$TBoxWidth_L;
        $RowHeight_L-4;"lucdia grande, verdana";13;Bold ;Center )
SVG_SET_ID ($Cell_Ref_T;"BB_txt")
SVG_SET_FONT_COLOR ($Cell_Ref_T;"White")


The first repositioning snippet addresses each object to be moved. Note the defined group "MoveableRectsWithText". This snippet uses the 4D SVG command SVG_SET_ATTRIBUTES to change the "x" and "y" attributes as necessary.

$Left_T:="100"
$SVG_ID_T:=SVG_Find_ID (SVG_Ref_A16;"AA")
SVG_SET_ATTRIBUTES ($SVG_ID_T;"x";$Left_T)

$Left_T:="130"
$SVG_ID_T:=SVG_Find_ID (SVG_Ref_A16;"BB")
SVG_SET_ATTRIBUTES ($SVG_ID_T;"x";$Left_T)


The second option is to address each object to be moved. Again note the defined group "MoveableRectsWithText". This snippet uses the 4D SVG command SVG_SET_TRANSFORM_TRANSLATE to reposition each object.

$Cell_Ref_T:=SVG_Find_ID (SVG_Ref_A16;"AA")
SVG_SET_TRANSFORM_TRANSLATE ($Cell_Ref_T;100)
$Cell_Ref_T:=SVG_Find_ID (SVG_Ref_A16;"BB")
SVG_SET_TRANSFORM_TRANSLATE ($Cell_Ref_T;100)


The third option is to group the objects into an SVG group using SVG_New_group and then use the 4D SVG command SVG_SET_TRANSFORM_TRANSLATE to reposition the defined group "MoveableRectsWithText", in one command.

$Gp_T:=SVG_New_group (SVG_Ref_A16;"MoveableRectsWithText")
For ($Ndx;0;3)
    $Rect_Ref_T:=SVG_New_rect ($Gp_T;$Left_L+2;$Top_L;$TBoxWidth_L;$RowHeight_L;0;0;
         "white";$BGColor_T;2)
    SVG_SET_ID ($Rect_Ref_T;$Title_T+"_mn")
    $Rect_Ref_T:=SVG_New_textArea ($Gp_T;$Title_T;$Left_L;$Top_L+6;$TBoxWidth_L;
        $RowHeight_L-4;"lucdia grande, verdana";13;Bold ;Center )
    SVG_SET_FONT_COLOR ($Rect_Ref_T;"White")
    SVG_SET_ID ($Rect_Ref_T;$Title_T+"_txt")
    $Left_L:=$Left_L+$TBoxWidth_L
End for

If ($Max_L<12)
  `// Move the group vertical by 90 units
  `//

    SVG_SET_TRANSFORM_TRANSLATE ($Gp_T;0;-90)
End if


Two last important points: First when using SVG_SET_ATTRIBUTES, you will use absolute coordinates. When using SVG_SET_TRANSFORM_TRANSLATE, the x and y values are offsets.

Second, when using SVG_SET_TRANSFORM_TRANSLATE, passing the value of zero for x and/or y will return the group to their original position for those values.