Добавление шрифта Awesome Icon динамически в текстовый элемент SVG - PullRequest
Новая
       14

Добавление шрифта Awesome Icon динамически в текстовый элемент SVG

1 голос
/ 12 марта 2019

Я пытаюсь динамически добавить значок шрифта в элемент svg, используя JavaScript.

Вот мой 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 = '&#xf00d;';
        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');
});

Выше вставлен новый текстовый элемент, но шрифт удивительный отображается как текст, а не конвертируется.

Если я добавлю текстовый элемент вручную, как это, тогда он будет работать: 

<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>

Понятно, что шрифт awesome не загружается в новый сгенерированный контент. Есть ли способ, которым я могу обойти это?

1 Ответ

1 голос
/ 12 марта 2019

используйте 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 = '&#xf005;';
  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>
...