Я конвертирую svg в png образ с этим кодом
<?php exec('/usr/bin/rsvg-convert -w 1000 -h 1000 tshirt.svg -o tshirt.png'); ?>
Это работает с одним svg-изображением.
На самом деле у меня есть изображение svg которое содержит несколько слоев изображений, таких как:
1-й слой – это изображение футболки фона, которое является прозрачным
Второй слой – это еще одно изображение футболки, которое содержит цвет
3-й слой – это небольшое изображение наклейки, которое должно быть размещено на майке
Мой код svg -:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg crossOrigin="anonymous" width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g class="canvas_background"> <rect class="canvas_variant_color" width="998" height="998" x="0" y="0" style="" fill="#008080"/> <rect real_size="16,22" height="547" class="canvas_border" width="343" y="160" x="335" fill="#008080" /> </g> <g class="canvas_objects" style="" mask="url('#Sibnip5tjg')"> <g style="display: block;" transform="matrix(1,0,0,1,-146.5,-236.3909)"> <image style="display: block; opacity: 1;" height="175" width="308" y="461" x="501" crossOrigin="anonymous" xlink:href="http://img.ruphp.com/php/unnamed.png"/> </g> </g> <g class="canvas_mockups"> <g class="canvas_styles"> <g class="canvas_style"> <g style="opacity: 1;"> <image xlink:href="http://img.ruphp.com/php/test.png" x="0" y="0" width="1000" height="1000" /> </g> </g> </g> </g> </svg>
Теперь я хочу, чтобы все слои изображения svg были объединены и сделали одно png изображение.
Прямо сейчас мое преобразованное изображение png показывает только цвет фона. Изображение футболки и наклейки не отображается.
Пожалуйста, установите расширение inkscape .
затем разместите свои изображения (которые вы использовали в svg) в той же папке, где вы сохраните файл svg.
затем измените путь изображения в svg-файле.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg crossOrigin="anonymous" width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g class="canvas_background"> <rect class="canvas_variant_color" width="998" height="998" x="0" y="0" style="" fill="#008080"/> <rect real_size="16,22" height="547" class="canvas_border" width="343" y="160" x="335" fill="#008080" /> </g> <g class="canvas_objects" style="" mask="url('#Sibnip5tjg')"> <g style="display: block;" transform="matrix(1,0,0,1,-146.5,-236.3909)"> <image style="display: block; opacity: 1;" height="175" width="308" y="461" x="501" crossOrigin="anonymous" xlink:href="unnamed.png"/> </g> </g> <g class="canvas_mockups"> <g class="canvas_styles"> <g class="canvas_style"> <g style="opacity: 1;"> <image xlink:href="test.png" x="0" y="0" width="1000" height="1000" /> </g> </g> </g> </g> </svg>
после этого выполните команду inkscape
exec( 'inkscape --without-gui --export-png=all.png tshirt.svg' );
то вы получите файл png в той же папке.
Проблема, которую вы получаете, связана с двумя связанными PNG, которые не разрешаются с этого сайта (хотя они и есть). Например, если вы должны сохранить эти два изображения с «dothejob.in» локально в папке img, а затем просто выбросите их в xlink: href в разметке SVG как img / test.png и img / unnamed.png вместо этого, вы Я найду, что твоя команда отлично работает.
Это также затруднило некоторые другие, и есть несколько различных решений, которые обсуждаются. Просмотрите эту тему в другом месте в stackoverflow для получения дополнительной информации. Как вы решаете это, во многом будет зависеть от того, сколько svgs вы будете работать, насколько быстро вам нужно их обрабатывать и т. Д.