javascript - 将 Font awesome 图标动态添加到 SVG 文本元素

Question

我正在尝试使用 JavaScript 将超赞字体图标动态添加到 svg 元素。

这是我的 SVG:

<svg id="mySVG"  baseProfile="full" xmlns="http://www.w3.org/2000/svg"  preserveAspectRatio="xMidYMin"  class="svg-map">
    <g>
        <circle id="test-1" cx="50" cy="50" r="10" fill="black" stroke="white" stroke-width="2"></circle>
        <circle id="test-2" cx="150" cy="50" r="10" fill="black" stroke="white" stroke-width="2"></circle>
    </g>
</svg>

然后我创建了一个函数来添加这样的文本元素:

var svgNS = "http://www.w3.org/2000/svg";  
function createText(id, cx, cy, size, fill, stroke)
    {
        var seatX = document.createElementNS(svgNS,"text"); 
        seatX.setAttributeNS(null,"id", id);
        seatX.setAttributeNS(null,"x", cx);
        seatX.setAttributeNS(null,"y", cy);
        seatX.setAttributeNS(null,"r", size);
        seatX.setAttributeNS(null,"fill", fill);
        seatX.setAttributeNS(null,"stroke", stroke);
        seatX.setAttributeNS(null,"font-family", 'FontAwesome Pro 5');
        seatX.textContent = '';
        document.getElementById("mySVG").appendChild(seatX);
    }

$('circle').click(function () {
    var id = $(this).attr('id');
    var cx = parseInt($(this).attr('cx'));
    var cy = parseInt($(this).attr('cy'))
    var x = (cx - 8)
    var y = (cy + 9.25)
    createText(id+'_text', x, y, '10', 'white', 'none');
});

上面插入了新的文本元素，但是 awesome 字体显示为文本，而不是进行转换。

如果我像这样手动添加文本元素，那么它会起作用:

<svg id="mySVG"  baseProfile="full" xmlns="http://www.w3.org/2000/svg"  preserveAspectRatio="xMidYMin"  class="svg-map">
    <g>
        <circle id="test-1" cx="50" cy="50" r="10" fill="black" stroke="white" stroke-width="2"></circle>
        <circle id="test-2" cx="150" cy="50" r="10" fill="black" stroke="white" stroke-width="2"></circle>
        <text id="test-1_text" x="42" y="59.25" r="10" fill="white" stroke="none" >&#xf00d;</text>
    </g>
</svg>

很明显 font awesome 没有加载到生成的新内容中。有什么办法可以解决这个问题吗？

Answer 1

使用 innerHTML 代替 textContent。 textContent 不会为您解析 HTML。

var svgNS = "http://www.w3.org/2000/svg";

function createText(id, cx, cy, size, fill, stroke) {
  var seatX = document.createElementNS(svgNS, "text");
  seatX.setAttributeNS(null, "id", id);
  seatX.setAttributeNS(null, "x", cx);
  seatX.setAttributeNS(null, "y", cy);
  seatX.setAttributeNS(null, "r", size);
  seatX.setAttributeNS(null, "fill", fill);
  seatX.setAttributeNS(null, "stroke", stroke);
  seatX.setAttributeNS(null, "font-family", 'FontAwesome');
  seatX.innerHTML = '';
  document.getElementById("mySVG").appendChild(seatX);
}

$(document).ready(function() {
  $('circle').click(function() {
    var id = $(this).attr('id');
    var cx = parseInt($(this).attr('cx'));
    var cy = parseInt($(this).attr('cy'))
    var x = (cx - 8)
    var y = (cy + 9.25)
    createText(id + '_text', x, y, '10', 'white', 'none');
  });
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg baseProfile="full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin" class="svg-map">
    <g id="mySVG">
        <circle id="test-1" cx="50" cy="50" r="10" fill="black" stroke="white" stroke-width="2"></circle>
        <circle id="test-2" cx="150" cy="50" r="10" fill="black" stroke="white" stroke-width="2"></circle>
    </g>
</svg>