2

Код страницы формируется динамически.
Текст получаю в переменной, которая вставляет его в код. По этому обратиться к части текста и использовать textPath не могу.

Задача такая, уменьшить цифру после запятой. В примере с текстом 23,6 я могу сдвинуть цифру 6 вниз, а хотел бы просто сделать её маленькой.

<svg> 
 <text x="0" y="15 15 15 20">23,6</text> 
</svg>
Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
Сергей Казаков
  • 61
  • 1
  • 7
  • а что в y означают цифры ? – Резидент Казахстана Apr 29 '20 at 09:53
  • Горизонтальное смещение каждого символа в тексте. Таким образом в моем примере цифра 6 сползет вниз. – Сергей Казаков Apr 29 '20 at 11:00
  • круто ..это для меня новое – Резидент Казахстана Apr 29 '20 at 11:04
  • @СергейКазаков немного не точно объяснили. В SVG, если даже текст 23,6 введен обычным образом, через команду то каждый символ превращается в векторный объект, который имеет координаты. Поэтому, записав y="15 15 15 20" оставляем первые три символа, включая запятую без изменений, а четвертый символ 6 смещаем вниз на 5 пикселей – Alexandr_TT Apr 29 '20 at 13:25
  • Вот на этом свойстве отдельных координат каждого символа в слове сделал анимацию, смотрите примеры 5 и 6 https://ru.stackoverflow.com/a/1106346/28748 – Alexandr_TT Apr 29 '20 at 13:32
  • покажите код, которым Вы формируете html – Stranger in the Q Apr 30 '20 at 06:13
  • Код страницы в моем случае пишется в админке сайта умного дома Majordomo. Если нужно вставить значение свойства в html, то используется такая конструкция %Объект.свойство% При открытии страницы, эта конструкция будет заменена значением. Поэтому я и не могу разбить текст как надо и использовать tspan. – Сергей Казаков May 04 '20 at 18:24

1 Answers1

2

Можно воспользоваться командой tspan, которая даст возможность применить различные стили к разным символам строки.

<svg> 
 <text x="0" y="15">
  <tspan font-size="18px">23,</tspan>
  <tspan  font-size="12px"> 6</tspan>
 </text> 
</svg>
Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
  • это ндо какую то регулярку - как regExp споткнулась об запятую так и обернула всё что после в tspan – Резидент Казахстана Apr 29 '20 at 10:04
  • @MaximLensky: а зачем на сервере? – UModeL Apr 29 '20 at 10:04
  • ну написано что код страницы динамический а значит что будут проблемы с тем что бы ручками изменить – Резидент Казахстана Apr 29 '20 at 10:05
  • @MaximLensky: думаю, что просто неправильно сформулировано. Скорее данные динамические, а не сам код. – UModeL Apr 29 '20 at 10:07
  • 1
    надо подождать автора вопроса - ему виднее – Резидент Казахстана Apr 29 '20 at 10:08
  • @MaximLensky конечно получится, если автор использует JS, хоть на серверной, хоть на клиентской части. JS прекрасно умеет разбить строку и добавить, поменять стили Автора вопроса, как я понял волнует, если в SVG команды позволяющие менять размер шрифта – Alexandr_TT Apr 29 '20 at 10:10
  • @Alexandr_TT: а <tspan> может содержать вложенный <tspan>? – UModeL Apr 29 '20 at 10:10
  • @Alexandr_TT: можно даже ещё проще - обернуть в <tspan> только дробную часть. – UModeL Apr 29 '20 at 10:14
  • @MaximLensky: про какие руки речь? Ежу морскому понятно, что скриптом всё делается. – UModeL Apr 29 '20 at 10:17
  • @MaximLensky: это потому, что метка единственная - SVG :) – UModeL Apr 29 '20 at 10:21
  • Данные, а именно текст, на страницу подставляются при сборке этой страницы. Поэтому и написал, что динамические. И поэтому же не могу применить . Текст 23,6 вставляется в код страницы. – Сергей Казаков Apr 29 '20 at 11:05
  • Можно конечно на сервере сделать разные переменные, и отправлять их при сборке страницы, но делать это ради виджета, в моем именно варианте, просто не целесообразно. – Сергей Казаков Apr 29 '20 at 11:06
  • Я привел вариант, как сместить цифру 6 вниз не разбивая исходного текста 23,6. Возможно есть ещё варианты с масштабом, но я не могу найти ничего подобного. – Сергей Казаков Apr 29 '20 at 11:08
  • @MaximLensky да, выходит что так. Когда я нашел как двигать символы в тексте, подумал, что с размером тоже не будет трудности. Но увы. – Сергей Казаков Apr 29 '20 at 11:12
  • @MaximLensky интуитивно так и подумал, но пока что не нашел. – Сергей Казаков Apr 29 '20 at 11:15