Help - HMI Positioning Components

Overview:

SVG uses an X, Y coordinate system. This allows graphics to be precisely positioned on each screen. We can move, rotate, and scale graphics within this coordinate system.

Grouping SVG Elements Together:

SVG elements can be grouped together by using a <g> tag. The <g> </g> tags act to group actions together so that they apply to all elements enclosed by them. Groups can be nested, so that you can have groups within groups.


	<!-- This is the outer group. -->
	<g>

		<!-- The contents go here. -->

			<!-- Groups can be nested. -->
			<g>
		
				<!-- The contents go here. -->
		
			</g>

	</g>

	<!-- This is a separate group. -->
	<g>

		<!-- The contents go here. -->

	</g>

Groups can be used to apply attributes to all elements enclosed by the group. However, defining an attribute at a deeper nesting level will override any which are applied at outer levels.


	<!-- This is the outer group. -->
	<g fill="red">

		<!-- This circle will be red. -->
		<circle cx="25px" cy="25px" r="25px"/>

		<!-- However, this one will be orange. -->
		<circle fill="orange" cx="75px" cy="25px" r="25px"/>

	</g>

Translating or "Shifting" SVG Elements

SVG elements can be "transformed" using a "translate" statement which is used to translate (shift) it on the screen. The position is given in X & Y coordinates where 0,0 is in the upper left corner of the SVG canvas. The <g> </g> tags act to group actions together so that they apply to all elements enclosed by them.

Transforms can be nested. When this is done, the inner transform is position relative to the outer one. This can be convenient when creating large complex graphics.

SVG


	<!-- This shows a simple translational transform. -->
	<g transform="translate(350,105)">

		<!-- The contents go here. -->

			<!-- Transforms can be nested. -->
			<g transform="translate(50,5)">
		
				<!-- The contents go here. -->
		
			</g>

	</g>

Rotating SVG Elements

SVG graphics can also be rotated.

SVG


	<!-- This shows a simple rotational transform. -->
	<g transform="rotate(90)">

		<!-- The contents go here. -->

	</g>

Scaling SVG Elements

SVG graphics can also be scaled. When a single scale factor is applied, the same scale factor is applied in both X and Y. When two scale factors are applied (e.g. transform="scale(2, 0.5)"), then separate scale factors can be applied to the X and Y. This allows changing the proportions of a graphic as well as its size.

SVG


	<!-- This shows a simple scale in x and y. -->
	<g transform="scale(2)">

		<!-- The contents go here. -->

	</g>

	<!-- This shows a scaling using different in x and y. -->
	<g transform="scale(2, 0.5)">

		<!-- The contents go here. -->

	</g>

Help Topics

Manual HMI Web Page Construction