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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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