javascript - 如何从字符串标记（模板）创建 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>