All geek questions in one place

Embed SVG HTML

I am currently having problems aligning the embedded SVG inside the bounding DIV, as in this example.

<!DOCTYPE html> <html> <body> <div style="border: 1px solid black; height: 50px; width: 100px; vertical-align:top;"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100""> <rect x="0" y="0" width="100" height="100" style="fill: red;" /> </svg> </div> </body> </html>

SVG changes according to the size of the div, but I cannot set the alignment for SVG. Neither text alignment nor vertical alignment seem to work in Firefox 9, Chrome 18, IE 9, or Opera 11.61. I just want to place the embedded SVG in the upper left corner of the DIV.

Please note that in my case, the surrounding DIV has a dynamic lowering (% value), so using absolute positioning does not work.

Does anyone know how to align SVG in this case?

+4
source share
2 answers

Add preserveAspectRatio="xMinYMin" as an attribute of the svg element, for example. http://jsfiddle.net/longsonr/fLWhu/

+19
source

Add the attribute preserveAspectRatio="xMidYMid meet" to the <svg> element according to http://tutorials.jenkov.com/svg/svg-viewport-view-box.html .

0
source

Source: https://habr.com/ru/post/1393143/

More articles:


All Articles