CODEWITHSUNDEEP
javascripthtmlcsssvg
AliSavi
AliSavi

Reputation: 63

how to position svg which is nested and contained in parent svg

<svg width="33.5cm" height="57.5cm" style="border:1px solid black;">
		<svg width="31.8cm" height="54cm" x="1cm" y="2cm" style="border:1px solid black;">
			<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
			
			<!-- Header -->
			<svg width="100%" height="5.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
				<!-- Logo -->
				<svg width="23.6cm" height="100%">
					<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
				</svg>
			</svg>
			
			<!-- body -->
			<svg width="100%" height="20.6cm" transform="translate(0cm,5.8cm)">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:3; fill:none;"/>
				
			</svg>
			
			<!-- Ad -->
			<svg width="100%" height="26.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
			</svg>
		</svg>
	</svg>

i'm working on svg in html and added some nested svg in the webpage. how can I position the child svg contents which are present in a parent svg? the x and y coordinate is not working. and also tried translate but it is not working. I want to give values in cm (I don't know how to do it), but values in px also not working. is there a way to position svgs relative to one another? or if not possible, how can I translate or position it manually? The code is in sniplet, kindly check it out

Upvotes: 0

Views: 1237

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

You can use x and y attributes to position nested <svg> elements. For example:

<!-- body -->
<svg width="100%" height="20.6cm" x="0" y="5.8cm">

In the example below I have used this method to position the body svg. I also made it red here so it is obvious which one it is.

<svg width="33.5cm" height="57.5cm" style="border:1px solid black;">
		<svg width="31.8cm" height="54cm" x="1cm" y="2cm" style="border:1px solid black;">
			<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
			
			<!-- Header -->
			<svg width="100%" height="5.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
				<!-- Logo -->
				<svg width="23.6cm" height="100%">
					<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
				</svg>
			</svg>
			
			<!-- body -->
			<svg width="100%" height="20.6cm" x="0" y="5.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:3; fill:red;"/>
				
			</svg>
			
			<!-- Ad -->
			<svg width="100%" height="26.8cm">
				<rect width="100%" height="100%" style="stroke:black; stroke-width:1; fill:none;"/>
				
			</svg>
		</svg>
	</svg>

Note Be aware that a "cm" in SVG units will almost certainly not correspond to a real-world cm - for example on screen or printed. SVG units like "cm" and "in" are based on a standard CSS DPI of 96 CSS pixels per inch. No attempt is made to match the real DPI of the device that the SVG is being rendered on.

Upvotes: 2

Related Questions