javascript - 传输SVG代码DIV-输入-DIV

Question

我只是好奇 - 是否可以通过以下方式通过 SVG 图像代码发送？

<original div with inline SVG> -> Input field -> <final DIV>

我想使用以下代码:

<a href="#" id="copy-1">Copy-1</a>

<div id="source-1">

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>    

</div>

<input name="dynamichidden-637" value="" id="pole" />

<br />
<a href="#" id="copy-2">Copy-2</a>

<div id="source-2"></div>

和 Jquery:

jQuery( document ).ready(function( $ ) {
            $('#copy-1').click(function() {
                var value = $('#source-1').html();
                var input = $('#pole');
                input.val('')
                input.val(input.val() + value);
                return false;
            });
    $('#copy-2').click(function() {
        $('#pole').appendTo('#source-2');
        return false;
            });
});

所以我的问题是 - 是否可以通过这种方式实现它？或者使用某种其他解决方案，允许我将 svg 代码从一个页面传输到另一个页面，而不将数据存储在数据库中？这是 JSfiddle: http://jsfiddle.net/v2br8/16/

Answer 1

您只需使用输入的值创建副本:

var value = $('#pole').val();
var copy = $(value);
copy.appendTo('#source-2');

或者简单地说:

$($('#pole').val()).appendTo('#source-2');

DEMO