如何从一个 div 元素获取 svg 到另一个 div 元素

Question

我一直在尝试将 SVG 附加为附加其他 HTML 元素，但除了 SVG 元素外，所有其他 HTML 元素都附加。

以下是我试过的

我的原始 SVG 集是为 div 动态创建的，例如

HTML:

<div id="div3">
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
    <svg height="140" width="500">
        <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>
    <svg width="400" height="110">
        <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    </svg>
    <svg height="100" width="500">
        <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
        <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
    </svg>
</div>
<div id='slides'></div>

JavaScript:

var svgsiblings = $('#div3').children().siblings("svg");
var slides = document.getElementById( 'items2' );
var theDiv ="";
for (let i = 1; i < 10; i++) {
    if (currentcheck , currenttype,i) {
        var itemid = "check" + i;
        theDiv  += "<div class='item"
        theDiv  += " ' id='"
        theDiv  += currentcheck+'-'+itemid
        theDiv  += "'> "
        theDiv  += svgsiblings[i-1].outerHTML 
        theDiv  += " </div>";
    }       
}                                 
$('#items2').append(theDiv);

根据上面的JavaScript，我尝试追加。但它只在需要 SVG 的地方附加 HTML 我在下面提到的空 space

ID 为 #div3 的 div 标签可能包含 10 个不同的 SVG。这样我就通过 for 循环将它循环了 10,

输出：

<div id='slides'>
     <div class='item' id='check1'>   </div>
     <div class='item' id='check2'>   </div>
     <div class='item' id='check3'>   </div>
     <div class='item' id='check4'>   </div>
     <div class='item' id='check5'>   </div>         
</div>

预期输出：

 <div id='slides'>
    <div class='item' id='check1'> <svg><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg> </div>
    <div class='item' id='check2'> <svg><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /></svg> </div>
    <div class='item' id='check3'> <svg><ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /></svg> </div>
    <div class='item' id='check4'> <svg><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/></svg> </div>
    <div class='item' id='check5'> <svg><ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /><ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" /></svg> </div>
 </div>

Answer 1

您将 jQuery 与 vanilla JS 混合使用，虽然这不是坏事，但可能会造成混淆。使用一个或另一个有利于可读性（和最佳实践）。

$('#div3 svg').each(
   function(i) {
      $('#slides').append(
        $('<div>').append($(this))
                  .addClass('item')
                  .attr('id', `check${i+1}`))
   })

这遍历 #div3 中的 svg 元素，使用 $.append() 作为创建 div 元素并插入 $(this)（svg）的部分的包装器在新 div 里面。在该包装器之外，它应用类名和 id。

这 将 svg 从其原始位置移动 到幻灯片中。如果你想复制到幻灯片，你可以做这个小改动：

...
$('<div>').append($(this).clone())
...

// and here's that in one line
$('#div3 svg').each(function(i) { $('#slides').append($('<div>').append($(this)).addClass('item').attr('id', `check${i+1}`))})

.item {
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div3">
  <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  <svg height="140" width="500">
        <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>
  <svg width="400" height="110">
        <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    </svg>
  <svg height="100" width="500">
        <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
        <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
    </svg>
</div>
<div id='slides'></div>

如何从一个 div 元素获取 svg 到另一个 div 元素

how to get an svg from one div element to another div element

html

javascript

jquery

svg

append