商店编辑的SVG图像与JSON

Question

我目前正在开发一个应用程序，使用户可以更改连衣裙的SVG图像的不同部分的颜色，例如，他们可以为袖子，主体，主体，主体选择一种颜色领口等。用户还可以将提供的形状拖放到礼服上以增加设计。我现在想做的是将其编辑的设计存储到JSON文件中，当它们重新登录时，他们可以检索设计。有谁知道我是怎么这样做的，以确保用户选择的颜色以及他们增加的形状保存在他们点击的位置上？

Answer 1

我正在使用Web表单。这是我包含的我的SVG图像之一的示例以及JS文件的示例

<svg version="1.1" id="Dress7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<path class="main-body" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M73.9,359.4c5,2,8.8-1.4,13-2.8c6.3-2.2,12.4-4.9,18.5-7.6c4.7-2.1,9.2-4.5,13.9-6.5c1.7-0.7,2.8-1.7,3.3-3.5
    c3.7-13.4,7.6-26.8,11.1-40.3c3.5-13.5,6.1-27.4,10.3-40.7c2.6-8.3,1.3-16.2,0.7-24.3c-0.6-8-1.4-16-2.4-24
    c-1.5-11.3-3.3-22.6-4.8-33.9c-1.1-7.7-1.9-15.4-2.9-23.1c-0.3-2.7-0.9-5.1-2.5-7.6c-2-3-2.9-6.7-4.1-10.1
    c-4.4-12.3-8.8-24.7-13.2-37c-4.7-13.2-9.4-26.4-14.1-39.5c-0.3-0.9-0.5-1.9-0.6-2.9c-0.6-3.8,2.4-6.8,6.1-6c1.5,0.3,3,1.1,4.3,2
    c4,2.7,5.8,2.7,9.9,0c1.2-0.8,2.8-1.1,4.1-1.8c3.2-1.5,6.4-3.1,9.5-4.7c0.5-0.3,1-0.8,1.5-1c7.8-3.6,15.6-7.1,23.4-10.6
    c4.5-2,4.3-1.9,5.7,2.8c2,6.4,4.4,12.5,8.1,18.3c8.2,12.9,18.2,24.4,27.5,36.5c4.7,6.2,7.8,13.1,10.4,20.4c0.3,0.9,0.8,1.7,1.6,3.4
    c1.3-2.8,2.5-4.8,3.2-7c2.5-7.3,6.3-13.7,11.2-19.6c7.3-8.9,14.5-17.9,21.2-27.2c5.8-8.2,10.8-17,12.8-27.1c0.3-1.7,1-2.4,3.1-1.3
    c5.4,2.8,11.2,4.9,16.7,7.5c3.6,1.7,6.9,3.7,10.4,5.5c2.7,1.4,5.4,2.6,8.1,3.9c2.8,1.2,5.6,2.3,8.3,3.6c2.2,1,3.9,0.7,5.7-0.8
    c1.3-1,2.8-2,4.3-2.5c4.1-1.4,7.6,1.5,7.2,5.9c-0.1,1.3-0.4,2.7-0.9,3.9c-5.7,15.2-11.5,30.3-17.2,45.5c-4.7,12.5-9,25.2-14.2,37.5
    c-3.2,7.5-3.6,15.2-4.6,22.9c-1.9,14.2-3.6,28.5-5.2,42.8c-1.5,13.1-3,26.3-4.4,39.4c-0.2,1.5,0.2,3,0.6,4.5
    c2.7,9.8,5.6,19.5,8.2,29.4c2.6,9.9,4.8,19.9,7.4,29.9c2.5,9.7,5.3,19.3,8.2,28.8c0.3,1.1,1.6,2.1,2.7,2.6c3,1.4,6.2,2.3,9.2,3.7
    c4,1.8,7.7,4,11.7,5.7c6.2,2.6,12.6,5,18.9,7.4c7.2,2.7,14.3,5.3,21.6,7.7c1.5,0.5,3.4,0.2,5,0.7c4,1.1,8,2.1,11.9,3.6
    c3.5,1.3,7.5,1.4,10.5,4.1c0.3,0.3,0.8,0.3,1.2,0.4c4.2,0.7,4.8,1.7,3.4,5.8c-4,11.3-11.6,19-23,22.9c-2.1,0.7-3.3,1.8-3.6,4.1
    c-1,6.2-4,11.7-7.4,16.8c-3.9,5.7-10,8.8-16.8,10.2c-3.8,0.8-7.6,1.5-11.4,2.6c-1.1,0.3-2.3,1.4-3,2.4c-3.6,5.1-7.2,10.3-13.3,12.7
    c-5,2-10.3,2.4-15.5,2c-2.1-0.2-3.4,0.4-4.9,1.9c-7.6,7.6-17,10-26.7,6.3c-4-1.5-6.2-0.8-9,1.2c-3,2.2-6,4.4-8.9,6.6
    c-0.7,0.5-1.2,1.3-1.8,2c-0.9,1-1.7,2-2.6,3c-0.8-1.1-1.6-2.1-2.3-3.2c-1.3-1.9-2.1-4.9-3.8-5.5c-1.6-0.5-4.2,1.3-6.2,2.3
    c-5.2,2.5-10.6,4.7-15.6,7.6c-3.2,1.8-5.9,4.6-8.5,7.2c-1.5,1.5-2.4,2-3.7,0.1c-3.2-4.4-7.6-7.1-12.6-9.2
    c-5.1-2.2-10.1-4.8-15.1-7.4c-2.2-1.1-3.6-0.9-4.7,1.5c-0.8,1.9-1.9,3.6-3,5.4c-0.8,1.4-1.9,1.9-2.8,0.2c-2-4.2-5.6-6.6-9.2-9
    c-2.1-1.4-4.1-2.8-6.3-3.9c-0.7-0.4-2-0.4-2.7,0c-5.9,3.6-16.9,3.5-22.4-0.3c-2.8-1.9-5.4-4.1-8.2-5.9c-0.9-0.6-2.1-0.8-3.2-0.7
    c-5.4,0.2-10.7-0.1-15.8-2c-6-2.2-9.7-7.1-13-12.3c-1.4-2.2-3.1-2.8-5.4-3.3c-5.3-1.2-10.6-2.2-15.6-4.1
    c-8.4-3.1-12.6-10.4-15.9-18.2c-1-2.3-1.7-4.9-2.2-7.4c-0.4-1.9-1.4-2.8-3-3.3c-8.7-2.7-15.1-8.3-20.2-15.8c-2.1-3.1-3-6.3-3.7-9.7
    c-0.2-0.9,0.8-2.6,1.6-3.1c2.3-1.2,4.8-2.1,7.2-2.9c2.3-0.8,4.6-1.4,6.9-2c5.4-1.3,10.8-2.4,16.2-3.9c5.7-1.6,11.4-3.6,16.9-5.3
    C74.3,361,74.1,360.1,73.9,359.4L73.9,359.4z"/>
<path class="sleeve-left" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M326.1,62.6c0.4,2.1,0.8,4.2,1,6.3c0.8,9.2,1.6,18.5,2.4,27.8c1.1,14.3,2,28.7,3.2,43
    c1.2,15.8,2.6,31.5,4,47.2c1.1,11.6,2.3,23.3,3.5,34.9c1,9.3,2.1,18.6,3.2,27.9c0.1,0.5,0.3,1.1,0.2,1.6c-0.8,6.2,1.5,12,1.9,18.1
    c0.4,5.8,1.5,11.6,2.4,17.3c0.7,4.6,1.7,9.1,2.5,13.6c0.3,1.5,0.3,3,0.4,4.5c0,0.4-0.1,1,0,1.3c2.8,5.2,2.7,11.1,4,16.6
    c0.3,1.4,1,2.7,1.3,4.1c0.5,2.3,0.8,4.6,1.2,6.9c0.8,4,1.5,7.9,2.4,11.8c1.1,4.7,2.1,9.3,1.2,14.1c-0.5,3-2.4,3.2-5.8,1.8
    c-6-2.6-12.1-5-18.3-7.3c-4.3-1.6-9.2-2.3-12.9-4.8c-5.5-3.7-11.7-5.7-17.5-8.7c-1.1-0.5-1.9-2.1-2.3-3.3
    c-3.4-11.4-6.7-22.7-9.8-34.2c-2.3-8.4-4.3-16.9-6.6-25.4c-2.3-8.6-4.7-17.2-7-25.8c-0.5-2-0.7-4.3-0.5-6.3c1.5-14.5,3-29,4.8-43.4
    c2.1-16.5,4.2-32.9,6.9-49.3c0.9-5.7,3.3-11.2,5.3-16.7c6.7-18.3,13.6-36.6,20.5-54.8c2.2-5.8,4.4-11.6,6.7-17.5
    c0.2-0.5,0.5-0.9,0.7-1.3C325.6,62.6,325.8,62.6,326.1,62.6z"/>
<path class="sleeve-right" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M74,359.3c-1.9,0.6-3.8,1.3-5.7,1.9c-1.2,0.4-2.3,0.7-3.4,1c0-4.2,0.1-8,0-11.9c-0.1-3.8,0.7-7.4,1.8-11
    c1.2-4.2,1.7-8.5,2.5-12.8c1.3-7.5,2.5-15,3.9-22.5c1.3-7.1,3.1-14.2,4.1-21.4c1.5-10.4,3.3-20.7,4-31.2
    c0.9-13.3,2.9-26.4,4.3-39.6c1.4-13.3,2.7-26.6,3.8-40c1.8-21.2,3.3-42.4,5-63.6c1.2-14.5,2.5-29,3.7-43.5c0.1-1.4,0.5-2.7,0.8-4.1
    c0.2,0,0.5-0.1,0.7-0.1c0.3,0.7,0.7,1.3,0.9,2c6.9,19,13.7,38.1,20.5,57.1c3.6,10.2,7.5,20.4,10.5,30.8c1.8,6,2.1,12.4,3,18.7
    c1.4,10.1,2.9,20.1,4.2,30.2c1.3,9.8,2.4,19.7,3.5,29.5c0.7,5.7,1.4,11.3,1.8,17c0.2,2.3-0.1,4.8-0.7,7.1
    c-1.5,6.1-3.3,12.2-4.9,18.3c-3.1,12-6,24-9.2,36c-2.5,9.6-5.3,19.1-7.7,28.7c-0.7,2.6-2,4.2-4.5,5.1c-3.1,1.2-6.1,2.4-9.1,3.9
    c-1.4,0.7-2.5,1.9-3.7,2.8c-0.4,0.3-0.9,0.5-1.3,0.6c-1.9,0.6-3.8,1.2-5.6,1.9c-6,2.2-12,4.4-18.1,6.7
    C77.4,357.8,75.7,358.6,74,359.3C73.9,359.4,74,359.3,74,359.3z"/>
<path class="upper-neckline" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10"  d="M212.8,64.3c0.4-1,1-2.1,1.3-3.1c3.1-9.9,8.3-18.7,14.3-27.1c3.8-5.2,7.7-10.4,11.9-15.4
    c1.5-1.8,3.8-2.9,5.9-4.1c0.3-0.2,1.7,0.7,2,1.3c1,2.6,1.7,5.3,2.4,7.9c0.2,0.9,0.2,2.3-0.3,3c-3.4,5-6.9,10-10.5,14.9
    c-6.2,8.5-12.6,16.8-18.9,25.2c-2.4,3.2-4.5,6.6-6.8,9.9c-1.5,2.1-2.2,2.1-3.8,0c-5.3-7.4-10.4-14.9-15.8-22.2
    c-5.2-7-10.6-13.9-15.9-20.8c-1.7-2.2-3.2-4.5-4.5-6.9c-0.5-0.9-0.4-2.3-0.2-3.3c0.6-2.6,1.5-5.1,2.2-7.7c0.5-1.9,1.4-1.7,2.7-0.8
    c6.8,4.5,11.7,10.9,16,17.6c1.6,2.5,3.3,4.9,4.9,7.3c4.5,6.6,7.9,13.7,10.5,21.3c0.4,1.1,1,2.1,1.6,3.2
    C212.2,64.4,212.5,64.3,212.8,64.3z"/>
<path class="lower-neckline" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M212.5,110.1c-0.8-1.3-1.5-2-1.8-2.9c-2.6-7.9-7.1-14.7-12.3-21.1c-6.8-8.4-13.6-16.8-19.9-25.5
    c-5.3-7.4-9.8-15.3-12.3-24.2c-0.2-0.6-0.3-1.2-0.5-1.8c-0.8-3.8,1.7-6.9,5.6-6.5c1,0.1,2.1,1.3,2.7,2.2c5.5,7.5,10.9,15,16.3,22.5
    c6.2,8.6,12.4,17.2,18.7,25.8c2.5,3.5,3.7,3.5,6.2,0c5.2-7.2,10.1-14.6,15.4-21.8c5.4-7.3,11-14.5,16.5-21.7
    c1.3-1.8,2.4-3.7,3.6-5.6c0.9-1.5,2.1-1.7,3.7-1c0.9,0.4,2,0.6,2.6,1.2c0.9,0.9,1.8,2.2,1.8,3.4c0,1.6-0.6,3.3-1.2,4.9
    c-2.1,5.7-4.1,11.4-7.9,16.3c-6.7,8.9-13.3,17.8-19.9,26.8c-4.2,5.7-8.4,11.5-12.3,17.5c-1.7,2.7-2.7,5.8-4,8.8
    C213.5,107.9,213.1,108.7,212.5,110.1z"/>
    </svg>
    $('input#body_color').change(function () {
var colored = $(this).val();
$('.main-body').css({ fill: colored });

}(;

    $('input#sleeve_color').change(function () {
var colored = $(this).val();
$('.sleeve-right').css({ fill: colored });

}(;

    $('input#sleeve_color').change(function () {
var colored = $(this).val();
$('.sleeve-left').css({ fill: colored });

}(;

    $('input#lneck_color').change(function () {
var colored = $(this).val();
$('.lower-neckline').css({ fill: colored });

}(;

    $('input#uneck_color').change(function () {
var colored = $(this).val();
$('.upper-neckline').css({ fill: colored });

}(;

        $('.draggable').draggable({ helper: "clone" });
$('.draggable').bind('dragstop', function (event, ui) {
$(this).after($(ui.helper).clone().draggable());
});

Answer 2

您是使用WebForms还是MVC？这是"示例"代码。不要使用"原样"。

这个想法是要有一个隐藏的texarea形式，然后在提交序列号之前，将SVG序列化并将其设置为Texarea。然后，您可以在服务器端检索此SVG-In-In-In-In-In-in-Text形式，然后保存到数据库

中

function serializeSVG(){
 var oSerializer = new XMLSerializer();
 var svg = document.getElementsById('svg1');
 var serializedSvg = oSerializer.serializeToString(svg);
 var hiddenInput = document.getElementById('<%= Page.Master.FindControl("myHiddenInput").ClientID %>');
 
 hiddenInput.value = serializedSvg;
return true;
 
}

<form id="form1" runat="server" onsubmit="return serializeSVG();" >
<asp:HiddenField id="myHiddenInput" runat="server" />
...
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="100%"
   height="100%"
   viewBox="0 0 512 512"
   id="svg1"
   version="1.1">
  <defs>
    <radialGradient id="gradFace">
        <stop offset="10%" stop-color="#FFDD00"/>
        <stop offset="40%" stop-color="#FFCC00"/>
        <stop offset="80%" stop-color="#FFAA00"/>
        <stop offset="100%" stop-color="#FD7409"/>
    </radialGradient>
    <radialGradient id="gradEye">
        <stop offset="80%" stop-color="#FFF"/>
        <stop offset="90%" stop-color="#D6D6D6"/>
        <stop offset="100%" stop-color="#525355"/>
    </radialGradient>
    <linearGradient id="gradIris" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="10%"  stop-color="#0A0A0A" />
        <stop offset="95%" stop-color="#777777" />
    </linearGradient>
    <linearGradient id="glow" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="5%"  stop-color="#fff" stop-opacity="1" />
        <stop offset="95%" stop-color="#fff" stop-opacity="0.5" />
    </linearGradient>
    <linearGradient id="gradSmile" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="50%"  stop-color="#734204" />
        <stop offset="95%" stop-color="#8A4E05" />
    </linearGradient>
    <g id="eye">
        <circle cx="0" cy="0" r="84" fill="url(#gradEye)" />
        <circle cx="0" cy="0" r="28" fill="url(#gradIris)" stroke="#0A0A0A" />
    </g>
    <filter x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB" id="filterEye">
      <feMorphology
         radius="6"
         in="SourceGraphic"
         result="result0"
         id="feMorphology3099" />
      <feGaussianBlur
         in="result0"
         stdDeviation="5"
         result="result91"
         id="feGaussianBlur3101" />
      <feComposite
         operator="in"
         in="SourceGraphic"
         in2="result91"
         id="feComposite3103" />
    </filter>
  </defs>
    <circle cx="256" cy="256" r="256" fill="url(#gradFace)" />
    <path style="fill:url(#glow);opacity:0.9;filter:url(#filterEye)" d="m 464,155 c 0,67 -93,27 -208,27 -115,0 -207,41 -207,-27 0,-67 90,-143 205,-143 115,0 210,75 210,143 z" />
    
    <g id="eyesGlow" style="fill:#;filter:url(#filterEye)">
        <circle cx="142" cy="256" r="100" fill="#FFDD00" />
        <circle cx="370" cy="256" r="100" fill="#FFDD00" />
    </g>
    <g id="eyes">
        <use xlink:href="#eye" x="142" y="256" />
        <use xlink:href="#eye" x="370" y="256" />
    </g>
    
    <g>
        <rect style="fill:#FFDD00;" width="130" height="38" x="191" y="390" rx="6" ry="16" filter="url(#filterEye)" />
        <rect style="fill:url(#gradSmile);stroke:#734204" width="110" height="30" x="201" y="400" rx="15" ry="15" />
    </g>
    
    <g style="fill:url(#gradSmile);stroke:#734204" id="eyebbrows" y="0">
        <path d="m 311, 107 c 0, 0 6, -18 45, -18 44, 1 68, 35 68, 35 -8, 3 -37, -15 -48, -19 -26, -7 -65, 1 -65, 1 z" />
        <path d="m 201, 107 c 0, 0 -6, -18 -45, -18 -44, 1 -68, 35 -68, 35 8, 3 37, -15 48, -19 26, -7 65, 1 65, 1 z" />
    </g>
    
</svg>
<button id="submitBtn">Submit</button>
...
</form>

想法：

1. 向您的SVG添加'ID'，因此您可以在JavaScript中获得识别/查找
2. ＆lt上添加onsubmit方法;form ID =" form1" runat =" server" onsubmit =" return serializesvg((;">
3. 在函数序列化中，将序列化的SVG设置为隐藏输入
4. 在服务器端获取值

我对.net不太好，所以请随时修复您的方便