如何从字符串标记（模板）创建svg形状

Question

我是SVG的新手，所以这可能是一个愚蠢的问题，但是我想基于一些标记来创建SVG形状 ，例如，我想创建很多具有此标记的卡：

var svg_test_label = [
    '<g class="rotatable">',
      '<g class="scalable">',
        '<rect class="card"/><image/>',
       '</g>',
       '<text class="rank"/><text class="name"/>',
    '<g class="btn add"><circle class="add"/><text class="add">+</text></g>',
    '<g class="btn del"><circle class="del"/><text class="del">-</text></g>',
    '<g class="btn edit"><rect class="edit"/><text class="edit">EDIT</text></g>',
    '</g>'].join('');

感谢您的任何建议。

Answer 1

代表罗伯特：

 var svg_test_label = [ '<g class="rotatable">', '<g class="scalable">', '<rect class="card"/><image/>', '</g>', '<text class="rank"/><text class="name"/>', '<g class="btn add"><circle class="add"/><text class="add">+</text></g>', '<g class="btn del"><circle class="del"/><text class="del">-</text></g>', '<g class="btn edit"><rect class="edit"/><text class="edit">EDIT</text></g>', '</g>'].join(''); document.getElementById("foo").innerHTML = "<svg>" + svg_test_label + "</svg>"; 

 <div id="foo"></div>