Greetings. Faced a problem. For some reason, svg does not count from 0 in the y coordinate. I enclose an example:
<svg height="200" width="200" style="font-family:arial; background: #3aaf72;"> <text id="maintext" class="mainrow" x="100" y="0" fill="white" text-anchor="middle" style="font-size: 36px;"> <tspan style="font-style: italic;" x="100" text-anchor="middle" y="0">Lorum</tspan> </text> </svg> The line with the text will appear only when y = 40, why is this happening?
The text is not visible, because it is located outside the viewport and viewBox.
The origin (0,0) is in the upper left corner. The positive direction of the "y" coordinate is down. If you want to see the text that is located above, you must either raise the viewBox - the first example, or change the coordinate - y - the second example.
tspan not needed if there is only one line of text. Added a red frame - this is the viewport view. It is very convenient to look for the lost.
<svg baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="200" viewBox="0 -100 200 200" style="font-family:arial; background: #3aaf72; border:1px solid red"> <text id="maintext" class="mainrow" x="100" y="0" fill="white" text-anchor="middle" style="font-size: 36px;"> Lorum </text> </svg> Change the coordinate y=100 viewBox return to the place viewBox="0 0 200 200"
<svg baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="200" viewBox="0 0 200 200" style="font-family:arial; background: #3aaf72; border:1px solid red"> <text id="maintext" class="mainrow" x="100" y="100" fill="white" text-anchor="middle" style="font-size: 36px;"> Lorum </text> </svg> I took your source with a patch and raised it up a bit with the help of viewBox, the same case was out of sight. What tool did you paint? Apparently after that, judging by the code, there was still optimization. I recommend another tool - it does everything neatly - SVG-Editor
<svg baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 -100 300 300" style="background:#3aaf72; border:1px solid red;"> <g transform="scale(0.04248046875)"> <path transform="translate(0,0) rotate(180) scale(-1, 1)" d="M82 0l197 1397h296l-163 -1164h635l-33 -233h-932z"></path> <path transform="translate(1087,0) rotate(180) scale(-1, 1)" d="M72 430q0 139 72 258t195.5 188.5t268.5 69.5q202 0 331.5 -120.5t129.5 -317.5q0 -223 -152 -374.5t-376 -151.5q-198 0 -333.5 129.5t-135.5 318.5zM358 414q0 -98 57.5 -152.5t127.5 -54.5q57 0 104.5 30t75.5 76.5t43.5 99.5t15.5 103q0 93 -51 149t-135 56 q-51 0 -93.5 -23t-68.5 -58t-44 -77.5t-25 -80t-7 -68.5z"></path> <path transform="translate(2240,0) rotate(180) scale(-1, 1)" d="M47 0l131 930h277l-21 -133l4 -4q124 153 226 153q42 0 80 -23.5t85 -78.5l-129 -256q-67 100 -131 100q-46 0 -94 -42t-74 -93l-77 -553h-277z"></path><path transform="translate(2987,0) rotate(180) scale(-1, 1)" d="M125 340l84 590h276l-69 -494q-9 -62 -9 -108q0 -140 82 -140q107 0 234 136l84 606h276l-131 -930h-276l16 104q-142 -120 -301 -120q-153 0 -221 101q-51 75 -51 181q0 35 6 74z"></path><path transform="translate(4117,0) rotate(180) scale(-1, 1)" d="M57 0l131 930h277l-16 -119l4 -4q145 139 290 139q92 0 154.5 -45t81.5 -125q97 93 174.5 131.5t163.5 38.5q149 0 221 -103q54 -77 53 -187q0 -37 -6 -78l-80 -578h-276l76 535q6 44 6 79q0 127 -80 127q-46 0 -106.5 -39t-118.5 -106l-84 -596h-277l72 532q6 47 6 82 q-1 46 -11 76q-18 50 -75 51q-89 0 -219 -145l-84 -596h-277z"> </path> </g> </svg> here on ru.stackoverflow article about viewBox
Source: https://ru.stackoverflow.com/questions/619822/
All Articles
y- SLy_huhdominant-baseline="hanging"stackoverflow.com/questions/18571540/html5-svg-text-positioning - HamSterdominant-baselinewill not work. Jsfiddle.net/yvdp0Lnn - Happy_Cougar<svg height="300" width="300" background:="" #3aaf72;"=""is already an error in the post . - HamSter