Javascript 使用json存储已编辑的svg图像

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

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

其思想是在表单中有一个隐藏的texarea，在提交之前，将svg序列化为文本并将其设置为texarea。然后，您可以在服务器端以文本形式检索此svg并保存到数据库中

函数序列化svg（）{
var oSerializer=新的XMLSerializer（）；
var svg=document.getElementsById（'svg1'）；
var serializedSvg=oSerializer.serializeToString（svg）；
var hiddenInput=document.getElementById（“”）；
hiddenInput.value=serializedSvg；
返回true；
}

...
提交
...

我正在使用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 });

}))

}))

}))

}))

---

SVG本身是一个可以解析和序列化的XML文档。参考一下，看看是否有帮助。否则，如果您坚持只使用JSON，那么可以将XML（读取SVG）转换为JSON，有很多解决方案，但这取决于您用于构建应用程序的库/框架。我不太熟悉SVG图像的使用，因此我对这一点非常陌生，对您发送给我的网站不太了解。我正在使用ASP.NET对svg路径进行硬编码，然后调用一个使用颜色函数的js文件和另一个具有拖放功能的js文件更新我的响应并添加更多注释。看看这是否有用

    $('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());
});