将SVG转换为图像并在php服务器上传

Question

我正在努力定制像represent.com

这样的图片

我得到了所有的东西，比如上传图片，更换T恤的颜色，并在T恤上更改添加文字。

但是当我要将我的定制T恤设计保存为图像时，它会转换为图像，但它与我定制的不一样。只有当我在T恤上添加图片或添加文字时才会在T恤上有黑色矩形，否则如果我改变T恤的颜色那么它运作良好。

将它转换为图像后我应该如何在php服务器上传？

我使用了canvg插件canvg plugin 我的SVG代码：

    <svg id="canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>Created with Represent</desc>

    <defs>
        <pattern x="0" y="0" width="380" height="380" patternUnits="userSpaceOnUse" id="Sibvs5t8i8" viewBox="0 0 380 380">
            <image xlink:href="https://d28c8q1a6j07u6.cloudfront.net/assets/templates/heather-357782c6b1665b9d38d1e6b3c8a759a5.png" preserveAspectRatio="none" x="0" y="0" width="380" height="380"></image>
        </pattern>
        <mask id="Sibvs5t8ig">
            <g>
                <rect x="-2000" y="-2000" width="4000" height="4000" fill="#444444"></rect>
                <rect x="-160" y="-309" width="340" height="610" fill="#ffffff" real_size="10,14"></rect>
            </g>
        </mask>
    </defs>

    <g transform="matrix(1,0,0,1,367.5,189.5)" class="canvas_centered">

        <g class="canvas_layers" transform="matrix(0.361,0,0,0.361,0,0)">
            <g class="canvas_background">

                <rect class="canvas_variant_color" width="998" height="998" x="-499" y="-499" fill="#fff2d3"></rect>
                <rect fill="url('#Sibvs5t8i8')" class="canvas_variant_heather" width="998" height="998" x="-499" y="-499" style="opacity: 0;"></rect>
                <rect x="-160" y="-309" width="340" height="610" class="canvas_border" real_size="10,14"></rect>
                <line x1="10" x2="10" y1="-309" y2="301" class="canvas_guide"></line>

            </g>

            <g mask="url('#Sibvs5t8ig')" class="canvas_objects">

                <g transform="matrix(1,0,0,1,-160,-298.2784)" style="display: block;"><image xlink:href="http://localhost/craftedusa_prod/t-shirts/uploads/13.jpg" preserveAspectRatio="none" x="0" y="0" width="340" height="272.3214285714286" style="display: block; opacity: 1;"></image></g>
            </g>
            <g class="canvas_mockups">

                <g class="canvas_styles">

                    <g class="canvas_style">

                        <g data-side="front" style="opacity: 1;">
                            <image xlink:href="http://localhost/craftedusa_prod//images/custom_product/shortsleevetee_male_front.png" preserveAspectRatio="none" x="-500" y="-500" width="1000" height="1000" style="display: block;" class="is-style"></image>
                        </g>
                        <g data-side="back" style="opacity: 0;">
                            <image xlink:href="http://localhost/craftedusa_prod//images/custom_product/unisex-shortsleevetee-back.png" preserveAspectRatio="none" x="-500" y="-500" width="1000" height="1000" style="display: none;" class="is-style"></image>
                        </g>
                    </g>
                </g></g>
        </g>
    </g>
    <g class="canvas_tmp"></g>
</svg>

我的自定义设计：

从SVG转换图像：