Несколько строк изогнутого текста в SVG

Question

Есть ли способ в SVG рисовать несколько строк текста в одном элементе <text>, которые следуют одному и тому же контуру пути?Вот самое близкое, что я смог получить:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
    </defs>
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/>
    <text font-family="Arial" font-size="18px" text-anchor="middle">
        <textPath xlink:href="#text_0_path" startOffset="50%">
            <!-- 157.075 is the center of the length of an arc of radius 100 -->
            <tspan x="157.075">Here is a line</tspan>
            <tspan x="157.075" dy="20">Here is a line</tspan>
            <tspan x="157.075" dy="20">Here is a line</tspan>
        </textPath>
    </text>
</svg>

Вот вывод (в Chrome):

Это почти что я хочу.Проблемы:

• Мне бы хотелось, чтобы каждая строка текста была центрирована в верхней части дуги, а не начинать там текст.Кажется, что атрибут text-anchor забывается, когда значение x указано в tspan вдоль пути.(Это , а не в случае с прямым текстом; атрибут text-anchor запоминается.)
• Каждая последующая строка текста сокращается, как если бы она шла по концентрическому пути.Мне бы хотелось, чтобы каждая строка текста следовала одному и тому же контуру, как если бы путь был просто переведен в направлении y на высоту шрифта.

Я знаю, что мог бы просто создать три отдельных<path> элементов и свяжите их с тремя отдельными <text> (или <textPath>) элементами, но было бы неплохо логически объединить весь текст, используя элементы <tspan> для более поздних приложений.

Илиэто предполагается для работы, но есть ошибка рендеринга в Chrome?(маловероятно, ИМО)

Answer 1

Я не могу сказать, хотите ли вы, чтобы текст отображался концентрическими кругами или вы просто хотите перевести его.Если первое, то вы можете поэкспериментировать с межбуквенными атрибутами в элементах t-span.Это добавит отслеживание ваших персонажей, раздвигая их дальше.Я попробовал следующее, но выравнивание между линиями по какой-то причине потеряно:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
    </defs>
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/>
    <text font-family="Arial" font-size="18px" text-anchor="middle">
        <textPath xlink:href="#text_0_path" startOffset="50%">
            <!-- 157.075 is the center of the length of an arc of radius 100 -->
            <tspan x="157.075">Here is a line</tspan>
            <tspan x="157.075" dy="20" letter-spacing="2">Here is a line</tspan>
            <tspan x="157.075" dy="20" letter-spacing="4">Here is a line</tspan>
        </textPath>
    </text>
</svg>

Однако, если вы хотите последнее (концентрические круги), это похоже на работу в Safari и Chrome на Mac:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
    </defs>
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/>
    <g font-family="Arial" font-size="18px">
        <text text-anchor="middle">
            <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath>
        </text>
        <text text-anchor="middle" transform="translate(0, 20)">
            <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath>
        </text>
        <text text-anchor="middle" transform="translate(0, 40)">
            <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath>
        </text>
    </g>
</svg>

Я знаю, что вы снимали только tspans, но, как вы сказали, он сбрасывал значения startOffset.

HTH, Кевин