4

Есть одна проблема - нужно отображать цвет в svg не просто как текст в теге <text></text>, а как картинку. Связано это с тем, что есть приложение генерирующее svg файлы, которые должны конвертироваться в другие форматы( .jpg; .png; .pdf; и т.д.). А проблема такова - некоторые конвертеры(это или баг или намеренно сделано) игнорируют стили тега text(при этом не все стили). Функция вставки даты не в самом конвертере, а в приложении которое создает svg файлы(в которые на этапе генерации вставляется дата, а конвертер уже просто преобразовывает этот файл в другие форматы).

В svg: Отображение в браузере После конвертации: Конвертированное изображение

Конвертирование само по себе не моя проблема, но если мой файл не совсем правильно понимается какими-нибудь конвертерами это становится мой проблемой, поэтому я хочу отображать текст как картинку которую конвертеры должны нормально понимать.

Если что это я обнаружил в конвертере Convert Bot и вторая картинка - результат конвертации этого приложения, а первая - просто скрин из браузера.

Если кому интересно оказалось, что этот конвертер не понимает стили тега <text>,которые прописаны в атрибуте style=" ", но при этом понимает их, если они записаны как инлайн стили.

0

1 ответ 1

3

Судя по картинкам у вас не цвет пропадает при конвертации, он все равно чёрный в SVG по умолчанию. Вероятнее всего атрибут font-size="" игнорируется и размер шрифта ставится в минимум.

Можно воспроизвести текст, цифры SVG не с помощью тега <text>, а использовать <path>

Для этого в векторном редакторе выбираете шрифт, размер шрифта,набираете текст и переводите его контуры <path>

В меню вектоного редактора выбираете,- контур / оконтурить объект

введите сюда описание изображения

Сохраняете файл: сохранить как / Inkscape SVG (.*svg) открываете выпадающую вкладку и выбираете пункт - оптимизированный SVG

Вот что получилось, - теперь каждый символ имеет свой path это уже не текст, а изображение SVG. Надеюсь это вам поможет.

<?xml version="1.0" encoding="UTF-8"?>
<svg  version="1.1" width="200" height="200"  viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
 <g transform="translate(10 200)">
  <path d="m76 196h-29v-7q3-3 6-6t5-6q5-6 7-9 2-4 2-7 0-2-0.6-3-0.6-1-2-2-1-0.9-3-1t-3-0.5q-2 0-3 0.4-2 0.4-3 1-1 0.5-3 1t-2 1h-0.3v-7q2-1 5-2 3-0.9 7-0.9 6 0 10 3 4 3 4 9 0 3-0.7 5-0.6 2-2 4-1 2-3 4t-3 4q-3 3-7 7-4 3-6 5h23z" style=""/>
  <path d="m111 173q0 13-4 18-4 6-11 6-8 0-11-6t-4-18q0-13 4-18 4-6 11-6 8 0 11 6t4 18zm-8 14q0.9-2 1-6t0.4-8q0-5-0.4-8t-1-6q-0.9-2-3-4-2-1-4-1-3 0-4 1-2 1-3 4-0.9 2-1 6t-0.3 8q0 5 0.3 8 0.3 3 1 6 0.9 2 3 4 2 1 4 1 3 0 4-1 2-1 3-4z" style=""/>
  <path d="m144 196h-23v-5h8v-31h-8v-4q5 0 7-1 2-1 3-5h5v42h8z" style=""/>
  <path d="m175 169q0-5-0.9-8-0.9-3-2-5-1-2-3-2t-3-0.6q-4 0-6 3t-2 8q0 3 0.8 5t2 3q1 1 3 1 2 0.3 3 0.3 2 0 4-0.7 2-0.7 4-2 0.03-0.5 0.06-1 0.06-0.8 0.06-2zm-24-4q0-4 1-7 1-3 3-5 2-2 5-3 3-1 6-1 3 0 6 1 3 1 5 3 2 3 4 7 1 4 1 10 0 6-1 11-1 5-4 9-3 4-6 6-4 2-9 2-1 0-3-0.2-1-0.1-3-0.5v-6h0.3q0.8 0.4 2 0.8t3 0.4q6 0 10-4t4-12q-2 2-5 2-2 0.8-5 0.8-3 0-5-0.6t-4-2q-2-2-4-5-1-3-1-7z" style=""/>
  <path d="m197 196h-7v-9h7z" style=""/>
  <path d="m236 173q0 13-4 18-4 6-11 6-8 0-11-6t-4-18q0-13 4-18 4-6 11-6 8 0 11 6t4 18zm-8 14q0.9-2 1-6t0.4-8q0-5-0.4-8t-1-6q-0.9-2-3-4-2-1-4-1-3 0-4 1-2 1-3 4-0.9 2-1 6t-0.3 8q0 5 0.3 8 0.3 3 1 6 0.9 2 3 4 2 1 4 1 3 0 4-1 2-1 3-4z" style=""/>
  <path d="m270 196h-29v-7q3-3 6-6t5-6q5-6 7-9 2-4 2-7 0-2-0.6-3-0.6-1-2-2-1-0.9-3-1t-3-0.5q-2 0-3 0.4-2 0.4-3 1-1 0.5-3 1t-2 1h-0.3v-7q2-1 5-2 3-0.9 7-0.9 6 0 10 3 4 3 4 9 0 3-0.7 5-0.6 2-2 4-1 2-3 4t-3 4q-3 3-7 7-4 3-6 5h23z" style=""/>
  <path d="m287 196h-7v-9h7z" style=""/>
  <path d="m325 173q0 13-4 18-4 6-11 6-8 0-11-6t-4-18q0-13 4-18 4-6 11-6 8 0 11 6t4 18zm-8 14q0.9-2 1-6t0.4-8q0-5-0.4-8t-1-6q-0.9-2-3-4-2-1-4-1-3 0-4 1-2 1-3 4-0.9 2-1 6t-0.3 8q0 5 0.3 8 0.3 3 1 6 0.9 2 3 4 2 1 4 1 3 0 4-1 2-1 3-4z" style=""/>
  <path d="m354 169q0-5-0.9-8-0.9-3-2-5-1-2-3-2t-3-0.6q-4 0-6 3t-2 8q0 3 0.8 5t2 3q1 1 3 1 2 0.3 3 0.3 2 0 4-0.7 2-0.7 4-2 0.03-0.5 0.06-1 0.06-0.8 0.06-2zm-24-4q0-4 1-7 1-3 3-5 2-2 5-3 3-1 6-1 3 0 6 1 3 1 5 3 2 3 4 7 1 4 1 10 0 6-1 11-1 5-4 9-3 4-6 6-4 2-9 2-1 0-3-0.2-1-0.1-3-0.5v-6h0.3q0.8 0.4 2 0.8t3 0.4q6 0 10-4t4-12q-2 2-5 2-2 0.8-5 0.8-3 0-5-0.6t-4-2q-2-2-4-5-1-3-1-7z" style=""/>
 </g>
</svg>

Я добавил команду <g transform="translate(10 200)">, если будет необходимость передвинуть надпись.

2
  • 1
    Спасибо это помогло, хотя немного неудобно так-как дата вставляется соответственно дате генерации, и прийдется перебирать каждую цифру для вставки. Но это лучше чем ничего, спасибо 14 мар 2019 в 5:11
  • про + имелось ввиду голосовать за ответ или отметить его правильным? И функция вставки даты не в самом конвертере, а в приложении которое создает svg файлы(в которые на этапе генерации вставляется дата, а конвертер уже просто преобразовывает этот файл в другие форматы). 14 мар 2019 в 14:57

Ваш ответ

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

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