how to assign child element width to the parent element
Question
hi here is my code,
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="100">
<rect width="300" height="100" style="fill:green;stroke-width:3;stroke:gray">
</svg>
</body>
</html>
when i inspect the element the svg occupied 500px because of i have set internally 500px to that svg element. however i need, it should be occupied only child element width that is 300px.
Note : with out replacing svg width(500px) and without assign 300px to that element.
1 answers
solution1
0 2016-06-08 16:26:08
You can use a viewBox to show only the part of the drawing you want.
By default the aspect ratio will be preserved but I've overridden that below so that the width of 500 is obtained. I'm not sure what value of preserveAspectRatio would be most appropriate for you so you may need to experiment with different values.
<!DOCTYPE html> <html> <body> <svg width="500" height="100" viewBox="0 0 300 100" preserveAspectRatio="none"> <rect width="300" height="100" style="fill:green;stroke-width:3;stroke:gray"/> </svg> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.