#php #imagick
#php #imagick
Вопрос:
У меня есть SVG со встроенными SVG-файлами (изображение). Когда я конвертирую его в PNG, пока все выглядит нормально, но фон SVG-файлов остается белым, а не прозрачным.
Исходный SVG, как показано в Firefox
Вывод Imageick в формате PNG
Мой код
$im = new Imagick();
$im->setBackgroundColor(new ImagickPixel("transparent"));
$im->readImageBlob($svgCode);
$im->setImageFormat("png32");
Storage::put($filename . '.png', $im);
$im->clear();
$im->destroy();
Мой SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="560" height="280" id="bedSVG" class="bedsvg"><g class="style"></g> <title>Pflanzplaner.net - Beetansicht</title><desc>Beet erstellt mit Pflanzplaner.net</desc> <g><rect width="560" height="280" style="fill: darkolivegreen; fill-opacity: 0.1;"></rect></g> <g></g> <g id="27" class="grabbing"><g class="plant"><rect x="247.99999999999997" y="96.8" width="22" height="22" rx="7" ry="7" style="stroke: gray; stroke-dasharray: 4; stroke-opacity: 0.5; fill: rgba(255, 255, 255, 0.1); display: none;"></rect> <circle cx="259" cy="107.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----> <image x="247.8" y="96.6" width="22.4" height="22.4" xlink:href="http://localhost/img/vegetables/021-leaves.svg" style="fill-opacity: 0.8;"></image></g> <g><rect id="o" x="255" y="93.8" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="u" x="255" y="113.8" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="l" x="244.99999999999997" y="103.8" width="6" height="10" style="fill-opacity: 0.0;"></rect><rect id="r" x="268" y="103.8" width="6" height="10" style="fill-opacity: 0.0;"></rect></g></g><g id="28" class="grabbing"><g class="plant"><rect x="467.99999999999994" y="120.80000000000001" width="36" height="36" rx="14" ry="14" style="stroke: gray; stroke-dasharray: 4; stroke-opacity: 0.5;fill: rgba(255, 255, 255, 0.1); display: none;"></rect> <circle cx="485.99999999999994" cy="138.8" r="14" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <image x="471.99999999999994" y="124.80000000000001" width="28" height="28" xlink:href="http://localhost/img/vegetables/021-leaves.svg" style="fill-opacity: 0.8;"></image> <!----></g> <g><rect id="o" x="481.99999999999994" y="117.80000000000001" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="u" x="481.99999999999994" y="151.8" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="l" x="464.99999999999994" y="134.8" width="6" height="10" style="fill-opacity: 0.0;"></rect><rect id="r" x="501.99999999999994" y="134.8" width="6" height="10" style="fill-opacity: 0.0;"></rect></g></g><g id="29" class="grabbing"><g class="plant"><rect x="54.8" y="172.39999999999998" width="148" height="22" rx="7" ry="7" style="stroke: gray; stroke-dasharray: 4; stroke-opacity: 0.5; fill: rgba(255, 255, 255, 0.1); display: none;"></rect> <circle cx="65.8" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="79.8" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="93.8" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="107.8" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="121.8" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="135.79999999999998" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="149.79999999999998" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="163.79999999999998" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="177.79999999999998" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="191.79999999999998" cy="183.39999999999998" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----> <image x="117.59999999999998" y="172.2" width="22.4" height="22.4" xlink:href="http://localhost/img/vegetables/021-leaves.svg" style="fill-opacity: 0.8;"></image></g> <g><rect id="o" x="124.79999999999998" y="169.39999999999998" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="u" x="124.79999999999998" y="189.39999999999998" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="l" x="51.8" y="179.39999999999998" width="6" height="10" style="fill-opacity: 0.0;"></rect><rect id="r" x="200.79999999999998" y="179.39999999999998" width="6" height="10" style="fill-opacity: 0.0;"></rect></g></g><g id="30" class="grabbing"><g class="plant"><rect x="259.2" y="26.799999999999997" width="162" height="36" rx="7" ry="7" style="stroke: gray; stroke-dasharray: 4; stroke-opacity: 0.5; fill: rgba(255, 255, 255, 0.1); display: none;"></rect> <circle cx="270.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="284.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="298.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="312.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="326.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="340.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="354.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="368.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="382.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="396.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="410.2" cy="37.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="270.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="284.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="298.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="312.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="326.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="340.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="354.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="368.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="382.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="396.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----><circle cx="410.2" cy="51.8" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----> <image x="329" y="33.599999999999994" width="22.4" height="22.4" xlink:href="http://localhost/img/vegetables/021-leaves.svg" style="fill-opacity: 0.8;"></image></g> <g><rect id="o" x="336.2" y="23.799999999999997" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="u" x="336.2" y="57.8" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="l" x="256.2" y="40.8" width="6" height="10" style="fill-opacity: 0.0;"></rect><rect id="r" x="419.2" y="40.8" width="6" height="10" style="fill-opacity: 0.0;"></rect></g></g><g id="31" class="grabbing"><g class="plant"><rect x="66" y="94" width="22" height="22" rx="7" ry="7" style="stroke: gray; stroke-dasharray: 4; stroke-opacity: 0.5; fill: rgba(255, 255, 255, 0.1); display: none;"></rect> <circle cx="77" cy="105" r="7" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <!----> <image x="65.8" y="93.8" width="22.4" height="22.4" xlink:href="http://localhost/img/vegetables/021-leaves.svg" style="fill-opacity: 0.8;"></image></g> <g><rect id="o" x="73" y="91" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="u" x="73" y="111" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="l" x="63" y="101" width="6" height="10" style="fill-opacity: 0.0;"></rect><rect id="r" x="86" y="101" width="6" height="10" style="fill-opacity: 0.0;"></rect></g></g><g id="32" class="grabbing"><g class="plant"><rect x="54.8" y="21.2" width="36" height="36" rx="14" ry="14" style="stroke: gray; stroke-dasharray: 4; stroke-opacity: 0.5; fill: rgba(255, 255, 255, 0.1); display: none;"></rect> <circle cx="72.8" cy="39.199999999999996" r="14" style="stroke-width: 2; stroke: gray; stroke-dasharray: 4; stroke-opacity: 1; fill: rgba(230, 255, 230, 1); background-color: rgba(230, 255, 230, 1);"></circle> <image x="58.8" y="25.199999999999996" width="28" height="28" xlink:href="http://localhost/img/vegetables/034-strawberry.svg" style="fill-opacity: 0.8;"></image> <!----></g> <g><rect id="o" x="68.8" y="18.2" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="u" x="68.8" y="52.199999999999996" width="10" height="6" style="fill-opacity: 0.0;"></rect><rect id="l" x="51.8" y="35.199999999999996" width="6" height="10" style="fill-opacity: 0.0;"></rect><rect id="r" x="88.8" y="35.199999999999996" width="6" height="10" style="fill-opacity: 0.0;"></rect></g></g></svg>
Тег изображения в деталях:
<image
x="247.8"
y="96.6"
width="22.4"
height="22.4"
xlink:href="http://localhost/img/vegetables/021-leaves.svg"
style="fill-opacity: 0.8;">
</image>