用json編輯svg圖像

Question

我目前正在開發一個應用程序，它允許用戶更改一件衣服的svg圖像的不同部分的顏色，例如他們可以爲袖子，主體，領口等選擇顏色用戶還可以拖拽提供到裙子上的形狀以增加設計。我現在想要做的就是將他們編輯的設計存儲到json文件中，當他們重新登錄時可以檢索設計。有誰知道我如何去做這件事，以確保用戶選擇的顏色，以及他們添加的形狀保存到他們點擊的位置？

Answer 1

您使用的是WebForms還是MVC？這是'示例'代碼。不要使用「原樣」。

想法是在窗體中隱藏texarea，然後提交您將svg序列化爲文本並將其設置爲texarea。然後，您可以在服務器端檢索該SVG-的文本形式，並保存到數據庫

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，所以你可以在JavaScript中找到/查找
2. 在表單上添加提交方法< form id =「form1」runat =「server」onsubmit =「return serializeSVG（）;」 >
3. 在功能serializeSVG，設置系列化SVG隱藏輸入
4. 獲取在服務器端的價值

我不是很好用.NET可以隨意修改代碼爲您提供方便

Answer 2

我正在使用網頁表單。這裏是我的一個我的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()); 
});