Точно центрируйте текст в SVG - PullRequest
Новая
       49

Точно центрируйте текст в SVG

0 голосов
/ 20 июня 2020

Я попытался использовать стили text-anchor:middle;text-align:center, чтобы текст располагался прямо в центре прямоугольника. Если бы я написал «боб» в качестве текста, то я бы исключил прицел, чтобы он был направлен в центр «о».

Но это не так, как это работает. Значение Y центрируется на основе базовой линии текста, а не середины текста. 

  <g
     id="1_text"
     font-size="20">
    <text
       id="text4"
       y="55.0"
       x="105.0"
       style="stroke:none;text-anchor:middle;text-align:center">Fooburgerfont!</text>
  </g>
  <g
     stroke="#008000"
     id="2_rectangle"
     fill="none">
    <rect
       id="rect7"
       y="20"
       x="20"
       width="170"
       height="70" />
  </g>
  <g
     stroke="black"
     id="3_crosshairs"
     fill="none">
    <line
       id="line10"
       y2="100"
       y1="0"
       x2="105.0"
       x1="105.0" />
    <line
       id="line12"
       y2="55.0"
       y1="55.0"
       x2="200"
       x1="0" />
  </g>

enter image description here

I thought maybe I could offset the y-value target by half the size of the font. That does get it closer, but it's still not precisely what I'm getting. I thought font-size было дает мне базовую линию-к- базовая высота, но, возможно, это не совсем тот размер, который мне нужен. Что-то более причудливое, например «верхняя часть восходящих элементов минус нижняя часть нижних нижних элементов», чтобы получить «динамический c диапазон» текста?

enter image description here

I've been doing this using the svgwrite module . 

def simple_text(name='label_test_big.svg'):
    dwg = svgwrite.Drawing(name, (PAPER_WIDTH_PX, PAPER_HEIGHT_PX), debug=True)

    font_size = 14
    paragraph = dwg.add(dwg.g(id='1_text', font_size=font_size))

    text_origin = (20+0.5*170, 20+0.5*70+0.5*font_size)
    cross_hairs = (20+0.5*170, 20+0.5*70)
    #text_origin = (20 + 0.5 * 170, 20 + 0.5 * 70 + 0.0 * font_size)
    #cross_hairs = (text_origin[0], text_origin[1] - 0.0 * font_size)
    print(f"text_origin: {text_origin}")
    paragraph.add(dwg.text("Fooburgerfont!", text_origin, style='stroke:none;text-anchor:middle;text-align:center'))

    shapes = dwg.add(dwg.g(id='2_rectangle', stroke='green', fill='none'))
    shapes.add(dwg.rect(insert=(20,20),  size=(170,70)))

    crosshairs = dwg.add(dwg.g(id='3_crosshairs', stroke="black", fill='none'))
    crosshairs.add(dwg.line(start=(cross_hairs[0],0), end=(cross_hairs[0],100)))
    crosshairs.add(dwg.line(start=(0,cross_hairs[1]), end=(200, cross_hairs[1])))

    dwg.save()
...