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

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 和一个空白区域

id 为 #div3 的 div 标签可能包含 10 个不同的 SVG。 这样我就通过了一个最多 10 个的 for 循环，

输出：

<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 中。 在该包装器之外，它应用 className 和一个 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>