HTML5 SVG - pozycjonowanie tekstu

Question

Próbuję ustawić element <text> w SVG HTML5, nadając mu górny margines. Powiedzmy, że chciałbym, aby element <text> miał górny margines 10px. To nie będzie działać:

<svg style="height: 100px; border: 1px solid black"> 
    <text fill="#000" x="10" y="10" font-size="50" font-family="Arial"> 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
    </text>  
</svg> 

Problem polega na tym, że dla elementów tekstowych SVG, odległość y mierzy się od dolnej linii tekstu, a nie na górze. Ten kod generuje tekst, w którym widoczne są tylko dolne 10 pikseli. Tak więc, musimy dodać wartość font-size wartości y dostać prawym marginesie:

<svg style="height: 100px; border: 1px solid black"> 
    <text fill="#000" x="10" y="60" font-size="50" font-family="Arial"> 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
    </text>  
</svg> 

Przynajmniej tak właśnie myślałem. Ale to też nie działa. Teraz górny margines jest zbyt duży, jak widać w skrzypcach: http://jsfiddle.net/yy8gS/2/. Chcę, aby górny margines był taki sam jak lewy margines, co oczywiście nie ma miejsca. Rzeczywiście, wartość 48 wygląda dobrze, ale nie mam pojęcia, dlaczego, lub w jaki sposób mogę obliczyć tę wartość dla arbitralnych marginesów i rozmiarów czcionek. Wydaje mi się, że wartość font-size nie jest faktyczną wartością wysokości tekstu używaną przez SVG do pozycjonowania.

Czy ktoś może mi w tym pomóc? Czy to, co próbuję zrobić, nawet możliwe z SVG?

Z góry dziękuję!

Answer 1

Ustawienie dominant-baseline powinno dać ci to, czego potrzebujesz, być może dominant-baseline="hanging", aby pozycja tekstu była oparta na górze tekstu, a nie na linii bazowej.

Jeśli chcesz wiedzieć, jak wysoka jest czcionka, powinieneś zadzwonić pod numer getExtentOfChar, aby to ustalić, zamiast zakładać, że otrzymujesz czcionkę o rozmiarze czcionki, o którą dokładnie prosiłeś.

Answer 2

Możesz również użyć em w y i dy -wpisach!

to rozwiązać mój problem, co najmniej:

<div> 
 
    <p>working: margin as y-value:</p> 
 
    <svg style="height: 100px; border: 1px solid black"> 
 
    <text fill="#000" x="10" y="1em" font-size="50" font-family="Arial"> 
 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
 
    </text>  
 
    </svg> 
 
</div>