SVG: Отображать textPath всегда в горизонтальном положении
Мне необходимо отображать текст на линиях сделанных через <path/>, но сами линии расположены под случайными углами (но сами линии всегда прямые если важно). Как можно сделать так, чтобы при любом положении <textPath/> отображался всегда горизонтально? Из того что не сработало: разделение на <tspan/> и CSS-свойство text-orientation (возможно неправильно использовал)
На картинке ниже привел то, как выглядят линии сейчас. Мне нужно чтобы текст лежал строго горизонтально при любом положении стрелки
Текст на линиях должен будет выглядеть так при любом положении самой стрелки (т.е. не повернут):
Ответы (2 шт):
Команда textPath размещает текст вдоль пути указанного в href="#txtPath"
Она не поворачивается, поэтому, чтобы сделать текст горизонтальным, нужно, чтобы путь href="#txtPath" был горизонтальным.
Можно решить вашу задачу добавлением линий, которые будут идти наклонно под любым углом, а к концу этих линий можно присоединить горизонтальный текст, указанный в textPath
Пример с одной наклонной линией и одним горизонтальным текстом:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500" viewBox="0 0 500 500" >
<!-- Горизонтальная линия вдоль которой идёт текст -->
<path id="txtPath" d="M150 40 h300" fill="none" stroke="black" />
<!-- Наклонная линия -->
<line x1="40" y1="400" x2="150" y2="40" fill="none" stroke="black" />
<text font-size="16px" >
<textPath href="#txtPath" startOffset="0" side="left" >
<tspan dy="-10">Текст находится на линии c id="txtPath </tspan>
</textPath>
</text>
</svg> Несколько линий:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500" viewBox="0 0 500 500" >
<path id="txtPath1" d="M150 40 h350" fill="none" stroke="none" />
<path id="txtPath2" d="M250 100 h350" fill="none" stroke="none" />
<path id="txtPath3" d="M250 200 h350" fill="none" stroke="none" />
<line id="line1" x1="40" y1="400" x2="150" y2="40" fill="none" stroke="black" />
<line id="line2" x1="40" y1="400" x2="250" y2="100" fill="none" stroke="black" />
<line id="line3" x1="40" y1="400" x2="250" y2="200" fill="none" stroke="black" />
<text font-size="18px" >
<textPath href="#txtPath1" startOffset="0" side="left" >
<tspan dy="-10">Текст находится на линии c id="txtPath </tspan>
</textPath>
<textPath href="#txtPath2" startOffset="0" side="left" >
<tspan dy="0">Другой текст на линии </tspan>
</textPath>
<textPath href="#txtPath3" startOffset="0" side="left" >
<tspan dy="0">Третий текст на линии </tspan>
</textPath>
</text>
</svg> Если вам нужны стрелки на концах линий, то можно добавить маркеры
<marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6"
orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
</marker>
Пример наклонных линий с маркерами
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500" viewBox="0 0 500 500" >
<defs>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
</marker>
</defs>
<path id="txtPath1" d="M150 40 h350" fill="none" stroke="none" />
<path id="txtPath2" d="M250 100 h350" fill="none" stroke="none" />
<path id="txtPath3" d="M250 200 h350" fill="none" stroke="none" />
<g marker-end="url(#markerArrow)" fill="none" stroke="black">
<line id="line1" x1="40" y1="400" x2="150" y2="40" />
<line id="line2" x1="40" y1="400" x2="250" y2="100" />
<line id="line3" x1="40" y1="400" x2="250" y2="200" />
</g>
<text font-size="18px" >
<textPath href="#txtPath1" startOffset="0" side="left" >
<tspan dy="-10">Текст находится на линии c id="txtPath </tspan>
</textPath>
<textPath href="#txtPath2" startOffset="5" side="left" >
<tspan dy="0">Другой текст на линии </tspan>
</textPath>
<textPath href="#txtPath3" startOffset="4" side="left" >
<tspan dy="0">Третий текст на линии </tspan>
</textPath>
</text>
</svg> Пример как на рисунке в вопросе
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500" viewBox="0 0 500 500" >
<defs>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
</marker>
</defs>
<path id="txtPath1" d="M95 100 h350" fill="none" stroke="none" />
<path id="txtPath2" d="M300 200 h350" fill="none" stroke="none" />
<path id="txtPath3" d="M130 350 h350" fill="none" stroke="none" />
<g marker-end="url(#markerArrow)" fill="none" stroke="black" stroke-width="3">
<line id="line1" x1="40" y1="40" x2="350" y2="350" />
<line id="line2" x1="240" y1="40" x2="350" y2="400" />
<line id="line3" x1="40" y1="350" x2="300" y2="400" />
</g>
<text font-size="18px" >
<textPath href="#txtPath1" startOffset="0" side="left" >
<tspan dy="-10">Text on Lines Test 1 </tspan>
</textPath>
<textPath href="#txtPath2" startOffset="5" side="left" >
<tspan dy="0">Text on Lines Test 2 </tspan>
</textPath>
<textPath href="#txtPath3" startOffset="5" side="left" >
<tspan dy="0">Text on Lines Test 3 </tspan>
</textPath>
</text>
</svg> Появились новые идеи,
как можно ещё проще решить вопрос - горизонтального положения текста при любом наклоне линий.
#1. Так как в команде textPath
<textPath href="#txtPath2" startOffset="5" side="left" >
<tspan dy="0">Text on Lines Test 2 </tspan>
</textPath>
Для расположения текста всегда используется path, который должен быть прямой, горизонтальной линией, то возникает вопрос, а зачем он тогда вообще нужен?
Проще заменить <textPath> на <text>
Команда - <text x="100" y="100" font-size="18px">Text on Lines Test 1 </text>, итак всегда располагает текст горизонтально.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500" viewBox="0 0 500 500" >
<defs>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
</marker>
</defs>
<text x="100" y="100" font-size="18px">Text on Lines Test 1 </text>
<text x="300" y="200" font-size="18px">Text on Lines Test 2 </text>
<text x="130" y="350" font-size="18px">Text on Lines Test 3 </text>
<g marker-end="url(#markerArrow)" fill="none" stroke="black" stroke-width="3">
<line id="line1" x1="40" y1="40" x2="350" y2="350" />
<line id="line2" x1="240" y1="40" x2="350" y2="400" />
<line id="line3" x1="40" y1="350" x2="300" y2="400" />
</g>
</svg> #2. Использование тега <title>
При использовании этого тега выводится текстовая подсказка, которая всегда расположена горизонтально.
<g id="line1">
<title>Text on Lines Test 1</title>
<line x1="40" y1="40" x2="350" y2="350" />
</g>
Необходимо только навести курсор на линию:
#line1,#line2,#line3 {
fill:none;
stroke:black;
stroke-width:3px;
transition:all 0.4s;
}
#line1:hover,#line2:hover,#line3:hover {
stroke:red;
stroke-width:6px;
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500" viewBox="0 0 500 500" >
<defs>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
</marker>
</defs>
<g marker-end="url(#markerArrow)">
<g id="line1">
<title>Text on Lines Test 1</title>
<line x1="40" y1="40" x2="350" y2="350" />
</g>
<g id="line2">
<title>Text on Lines Test 2</title>
<line id="line2" x1="240" y1="40" x2="350" y2="400" />
</g>
<g id="line2">
<title>Text on Lines Test 3</title>
<line id="line3" x1="40" y1="350" x2="300" y2="400" />
</g>
</g>
</svg>