Батик - поместите SVG поверх изображения

1

У меня есть файл изображения (jpg и т.д.) и некоторые рисунки svg (тэг svg скопирован с сайта, как Java String). Рисунок svg имеет такое же разрешение, что и файл изображения. Я хочу поместить svg рисунки поверх изображения и сохранить его как один файл. Мой подход, которым я не горжусь, но работает, заключается в следующем:

  • используйте Batik JPEGTranscoder для перекодирования svg в изображение с помощью этих рисунков svg и белого фона, сохраните это изображение.
  • поместите изображение с рисунками svg поверх моего файла изображения, выполнив операции низкого уровня на каждом пикселе.

Я хочу, чтобы вы могли нарисовать SVG-рисунки поверх моего изображения за один шаг.

Теги:
image-processing
svg
batik

1 ответ

4
Лучший ответ

Использование шаблона SVG решит вашу проблему.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="200" height="200">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
        <image x="0" y="0" width="200" height="200"
            xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/>
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#image)"/>
  <circle cx="100" cy="100" r="50"/>
</svg>

Скрипт доступен здесь.

Я вытащил SVG выше через ратификатор батика, и он был правильно растрирован.

Обновление
Как отмечено в комментариях, вы можете просто включить изображение непосредственно в свой SVG без использования шаблона.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      width="200" height="200">
  <image x="0" y="0" width="200" height="200"
      xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/>
  <circle cx="100" cy="100" r="50"/>
</svg>

Скрипт доступен здесь.

  • 2
    Почему вы думаете, что шаблон необходим? Почему бы просто не включить изображение непосредственно с помощью <image> ?
  • 0
    @RobertLongson Это было бы проще и должно работать одинаково хорошо. Спасибо за комментарий, я обновлю свой ответ.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню