2

У меня стоит цель добавить в уже имеющийся svg шаблон текст (вот сам шаблон).
В нем есть две колонки, и мне нужно добавить текст как в правую так и в левую. Я это делаю с помощью Python, парся svg как xml, используя lxml.etree. Для каждой колонки у меня есть двумерный массив, где первый уровень массива - отдельный пункт, а второй - отдельная строка. Между строками расстояние должно быть 1em, между отдельными пунктами 2em
Я это делаю такой функцией:

from lxml import etree
import logging

logging.basicConfig(level=logging.DEBUG)
svg_file = open('template.svg')
svg_code = svg_file.read().encode('utf-8')
xml_data = etree.fromstring(svg_code)

SVGNS = "http://www.w3.org/2000/svg"
TSPAN_ATTR = "alignment-baseline='before-edge' dominant-baseline='text-before-edge'"

def add_info(source):
    # 'source' must be two-dimensional list!

    # Find need parent
    # ns - namespace, within it found a parent will unreachable
    parent_class = xml_data.find(".//ns:text[@class='celebrations_text']", {'ns': SVGNS})
    if parent_class is None:
        logging.error('Incorrect name of class')
        return

    dy = 0
    for event in range(len(source):
        for line in range(len(source[event])):
            parent_class.append(etree.XML(
                "<tspan {attr}>{text}</tspan>".format(
                    text=source[event][line],
                    attr="x='{x}' dy='{dy}' text-anchor='{anchor}' {other_attr}".format(
                        x=20,
                        dy=str(dy) + 'em',
                        anchor='start',
                        other_attr=TSPAN_ATTR
                    )
                )
            ))

            if len(source[event]) > 1 and \
                source[event][:-1] != source[event][line]:
                    dy += 1
        dy += 2

    new_svg = etree.tostring(xml_data)
    svgCode = new_svg
    logging.info('Successfully add data to picture')


Допустим на вход мы подали такой массив:

[['День работников торговли'], ['День пяти случайных встреч'], ['День рождения гамбургера'], ['День памяти святого преподобного', 'Стефана Махрищского '], ['День сони - Финляндия'], ['День шотландского виски (National Scotch', 'Day) - США '], ['День танца (National Dance Day) - США'], ['День прогулки с домашними растениями', '(Take Your Houseplants for a Walk Day) - США '], ['День крем-брюле (National Creme Brulee', 'Day) - США '], ['День ковбоя (National Day of the Cowboy) -', 'США '], ['День памяти жертв - Вьетнам'], ['День победы - КНДР']]


Но, на выходе у нас получается это, хотя расстояние между ними должно было быть везде одинаково:результат работы данной функции
(или же вариант в виде svg)

Как это исправить?

5
  • больше всего в вопросе нужен результирующий svg 27 июл 2019 в 15:53
  • "вариант в виде svg" это и есть он 27 июл 2019 в 16:05
  • правилами ресурса не приветствуются ссылки на внешние ресурсы, лучше добавлять код в вопрос 27 июл 2019 в 16:28
  • Хорошо, буду знать. Просто там вроде под 10к символов, поэтому так сделал) 27 июл 2019 в 16:44
  • ну я тоже убрал огромный стиль из ответа, как видите, он не супер важен в контексте вопроса 27 июл 2019 в 16:45

1 ответ 1

1
  1. Атрибут dy в tspan задает отступ от прошлого элемента, а не от оборачивающего тега (то есть это междустрочный интервал), не нужно его считать

  2. Можно не добавлять text-anchor="start" alignment-baseline="before-edge" dominant-baseline="text-before-edge" в каждый tspan, а добавить их в тег верхнего уровня

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 1000" width="700" height="1000">
<defs>
<path d="M0 0L700 0L700 1000L0 1000L0 0Z" id="eWjYppAmQ"/>
<path d="M0 40.27L15.49 21.09L30.98 0" id="baZd0xu5t"/>
<path d="M0 81.76L31.47 42.83L62.94 0" id="a1HNjXENg"/>
<path d="M0 59.84L23.02 31.35L46.03 0" id="c1nIeNEPr"/>

<text id="c3frvufH8c" x="350" y="50" font-size="36" font-family="Open Sans" font-weight="800" font-style="normal" letter-spacing="0" alignment-baseline="before-edge" style="line-height:100%" xml:space="preserve" dominant-baseline="text-before-edge">
<tspan id="date" x="350" dy="0em" alignment-baseline="before-edge" dominant-baseline="text-before-edge" text-anchor="middle">27.07.2019</tspan>
</text>

<text id="dxaU76NEr" x="525" y="90" font-size="27" font-family="PT Sans" font-weight="700" font-style="normal" letter-spacing="0" alignment-baseline="before-edge" style="line-height:100%" xml:space="preserve" dominant-baseline="text-before-edge">
<tspan x="525" dy="0em" alignment-baseline="before-edge" dominant-baseline="text-before-edge" text-anchor="middle">&#1057;&#1054;&#1041;&#1067;&#1058;&#1048;&#1071;</tspan>
</text>

<text class="celebrations_text" id="c2wkfZaeI2" x="20" y="120" font-size="14" font-family="Open Sans" font-weight="800" font-style="normal" letter-spacing="0" alignment-baseline="before-edge" style="line-height:100%" xml:space="preserve" dominant-baseline="text-before-edge" text-anchor="start" alignment-baseline="before-edge" dominant-baseline="text-before-edge">

<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1088;&#1072;&#1073;&#1086;&#1090;&#1085;&#1080;&#1082;&#1086;&#1074; &#1090;&#1086;&#1088;&#1075;&#1086;&#1074;&#1083;&#1080;</tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1087;&#1103;&#1090;&#1080; &#1089;&#1083;&#1091;&#1095;&#1072;&#1081;&#1085;&#1099;&#1093; &#1074;&#1089;&#1090;&#1088;&#1077;&#1095;</tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1088;&#1086;&#1078;&#1076;&#1077;&#1085;&#1080;&#1103; &#1075;&#1072;&#1084;&#1073;&#1091;&#1088;&#1075;&#1077;&#1088;&#1072;</tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1087;&#1072;&#1084;&#1103;&#1090;&#1080; &#1089;&#1074;&#1103;&#1090;&#1086;&#1075;&#1086; &#1087;&#1088;&#1077;&#1087;&#1086;&#1076;&#1086;&#1073;&#1085;&#1086;&#1075;&#1086;</tspan>
<tspan x="20" dy="2em">&#1057;&#1090;&#1077;&#1092;&#1072;&#1085;&#1072; &#1052;&#1072;&#1093;&#1088;&#1080;&#1097;&#1089;&#1082;&#1086;&#1075;&#1086; </tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1089;&#1086;&#1085;&#1080; - &#1060;&#1080;&#1085;&#1083;&#1103;&#1085;&#1076;&#1080;&#1103;</tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1096;&#1086;&#1090;&#1083;&#1072;&#1085;&#1076;&#1089;&#1082;&#1086;&#1075;&#1086; &#1074;&#1080;&#1089;&#1082;&#1080; (National Scotch</tspan>
<tspan x="20" dy="2em">Day) - &#1057;&#1064;&#1040; </tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1090;&#1072;&#1085;&#1094;&#1072; (National Dance Day) - &#1057;&#1064;&#1040;</tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1087;&#1088;&#1086;&#1075;&#1091;&#1083;&#1082;&#1080; &#1089; &#1076;&#1086;&#1084;&#1072;&#1096;&#1085;&#1080;&#1084;&#1080; &#1088;&#1072;&#1089;&#1090;&#1077;&#1085;&#1080;&#1103;&#1084;&#1080;</tspan>
<tspan x="20" dy="2em">(Take Your Houseplants for a Walk Day) - &#1057;&#1064;&#1040; </tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1082;&#1088;&#1077;&#1084;-&#1073;&#1088;&#1102;&#1083;&#1077; (National Creme Brulee</tspan>
<tspan x="20" dy="2em">Day) - &#1057;&#1064;&#1040; </tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1082;&#1086;&#1074;&#1073;&#1086;&#1103; (National Day of the Cowboy) -</tspan>
<tspan x="20" dy="2em">&#1057;&#1064;&#1040; </tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1087;&#1072;&#1084;&#1103;&#1090;&#1080; &#1078;&#1077;&#1088;&#1090;&#1074; - &#1042;&#1100;&#1077;&#1090;&#1085;&#1072;&#1084;</tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1087;&#1086;&#1073;&#1077;&#1076;&#1099; - &#1050;&#1053;&#1044;&#1056;</tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1093;&#1086;&#1076;&#1100;&#1073;&#1099; &#1085;&#1072; &#1093;&#1086;&#1076;&#1091;&#1083;&#1103;&#1093; (Walk on Stilts Day) -</tspan>
<tspan x="20" dy="2em">&#1057;&#1064;&#1040; </tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1073;&#1083;&#1072;&#1075;&#1086;&#1076;&#1072;&#1088;&#1085;&#1086;&#1089;&#1090;&#1080; &#1074;&#1086;&#1083;&#1099;&#1085;&#1082;&#1077; (Bagpipe</tspan>
<tspan x="20" dy="2em">Appreciation Day) - &#1057;&#1064;&#1040; </tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1061;&#1086;&#1089;&#1077; &#1057;&#1077;&#1083;&#1100;&#1089;&#1086; &#1041;&#1072;&#1088;&#1073;&#1086;&#1089;&#1099; - &#1055;&#1091;&#1101;&#1088;&#1090;&#1086;-&#1056;&#1080;&#1082;&#1086;</tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1087;&#1077;&#1088;&#1077;&#1084;&#1080;&#1088;&#1080;&#1103; &#1074;&#1077;&#1090;&#1077;&#1088;&#1072;&#1085;&#1086;&#1074; &#1050;&#1086;&#1088;&#1077;&#1081;&#1089;&#1082;&#1086;&#1081;</tspan>
<tspan x="20" dy="2em">&#1074;&#1086;&#1081;&#1085;&#1099; - &#1057;&#1064;&#1040; </tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1062;&#1077;&#1088;&#1082;&#1074;&#1080; &#1061;&#1088;&#1080;&#1089;&#1090;&#1072; - &#1060;&#1080;&#1083;&#1080;&#1087;&#1087;&#1080;&#1085;&#1099;</tspan>
<tspan x="20" dy="2em">&#1048;&#1084;&#1077;&#1085;&#1080;&#1085;&#1099; &#1091; &#1057;&#1090;&#1077;&#1087;&#1072;&#1085;&#1072;, &#1054;&#1085;&#1080;&#1089;&#1080;&#1084;&#1072;, &#1055;&#1077;&#1090;&#1088;&#1072;,</tspan>
<tspan x="20" dy="2em">&#1053;&#1080;&#1082;&#1086;&#1083;&#1072;&#1103;, &#1048;&#1074;&#1072;&#1085;&#1072; </tspan>
<tspan x="20" dy="2em">&#1044;&#1077;&#1085;&#1100; &#1040;&#1082;&#1080;&#1083;&#1099; (&#1044;&#1086;&#1079;&#1086;&#1088;&#1099;)</tspan>
</text>

<text class="events_text" id="abAPLuJXz" x="680" y="120" font-size="14" font-family="Open Sans" font-weight="800" font-style="normal" letter-spacing="0" alignment-baseline="before-edge" style="line-height:100%" xml:space="preserve" dominant-baseline="text-before-edge"/>
<path d="M700 959.73L684.51 978.91L669.02 1000" id="b1KvsBAOzc"/>
<path d="M700 918.24L668.53 957.17L637.06 1000" id="c3A7QvlmII"/>
<path d="M700 940.16L676.98 968.65L653.97 1000" id="f1V5YE5C3x"/>
</defs>

<g>
<g><g><use xlink:href="#eWjYppAmQ" opacity="1" fill="#fff1e0" fill-opacity="1"/></g><g><g><use xlink:href="#baZd0xu5t" opacity="1" fill-opacity="0" stroke="#4aff43" stroke-width="3" stroke-opacity="1"/></g></g>
<g><g><use xlink:href="#a1HNjXENg" opacity="1" fill-opacity="0" stroke="#43abff" stroke-width="3" stroke-opacity="1"/></g></g>
<g><g><use xlink:href="#c1nIeNEPr" opacity="1" fill-opacity="0" stroke="#43ffdc" stroke-width="3" stroke-opacity="1"/></g></g>
<g id="a1aaYMQ5mR"><use xlink:href="#c3frvufH8c" opacity="1" fill="#1e273e" fill-opacity="1"/></g>
<g><use xlink:href="#i2AZK1F1fm" opacity="1" fill="#263f42" fill-opacity="1"/></g>
<g id="b3PhY2itPE"><use xlink:href="#b8BaOHIe3" opacity="1" fill="#4b212f" fill-opacity="1"/></g>
<g id="a41fczyzu"><use xlink:href="#dxaU76NEr" opacity="1" fill="#4b212f" fill-opacity="1"/></g>
<g id="cibmPKJ0E"><use xlink:href="#c2wkfZaeI2" opacity="1" fill="#00565f" fill-opacity="1"/></g>
<g id="abqUyScHO"><use xlink:href="#abAPLuJXz" opacity="1" fill="#00565f" fill-opacity="1"/></g>
<g><g><use xlink:href="#b1KvsBAOzc" opacity="1" fill-opacity="0" stroke="#4aff43" stroke-width="3" stroke-opacity="1"/></g></g>
<g><g><use xlink:href="#c3A7QvlmII" opacity="1" fill-opacity="0" stroke="#43abff" stroke-width="3" stroke-opacity="1"/></g></g>
<g><g><use xlink:href="#f1V5YE5C3x" opacity="1" fill-opacity="0" stroke="#43ffdc" stroke-width="3" stroke-opacity="1"/></g></g>
</g></g></svg>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.