时间戳

首页 > 解决方案 > 如何从一个 div 元素获取 svg 到另一个 div 元素

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

问题描述

我一直在尝试附加 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'>
    ​&lt;div class='item' id='check1'> <svg><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg> </div>
    ​&lt;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>
    ​&lt;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>
    ​&lt;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>
    ​&lt;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>

标签： javascripthtmljquerysvgappend

解决方案

您将 jQuery 与 vanilla JS 混合在一起，虽然这不是一件坏事，但它可能会令人困惑。使用其中一种对可读性（和最佳实践）有好处。

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

这会循环遍历 中的 svg 元素#div3，$.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>

推荐阅读