Как сделать FontAwesome как SVG-изображение, используя Javascript? - PullRequest
Новая
       20

Как сделать FontAwesome как SVG-изображение, используя Javascript?

0 голосов
/ 05 июля 2018

Я хочу визуализировать значок FontAwesome, поскольку SVG динамически предоставляет его в качестве источника изображения с использованием Javascript. Я хочу, чтобы мой вывод был примерно таким

output

PS - Я нарисую круг сам. Просто нужен способ визуализации иконки.

Пока я пробовал этот подход: 

function addSVG() {

  var ele = document.getElementById("svg");

  var svg = `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
        <text x="4" y="15" style="font-family: FontAwesome" fill="red">&#xf007;</text>
    </svg>`

  var output = 'data:image/svg+xml;base64,' + btoa(svg)

  ele.src = output;
}
addSVG()
<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
What it should look like:
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <text x="4" y="15" style="font-family: FontAwesome" fill="red">&#xf007;</text>
  </svg>
What it looks like:
  <img id="svg">
</body>

Как видите, без Javascript (только с использованием SVG в HTML) он работает нормально.

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

Нельзя использовать элемент <img> при обращении к внешней таблице стилей CSS из XML. Вам нужно использовать элемент <object>, такой как , в этом ответе рекомендуется и добавить <?xml-stylesheet?> инструкцию обработки , чтобы блоб SVG + XML мог найти глиф FontAwesome для сущности HTML &#xf007;. 

function addSVG() {
  var ele = document.getElementById("svg");
  var svg = `
    <?xml-stylesheet type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"?>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
        <text x="4" y="15" style="font-family: FontAwesome" fill="red">&#xf007;</text>
    </svg>`
  var output = `data:image/svg+xml;utf8,${svg}`

  ele.type = 'image/svg+xml';
  ele.data = output;
}
addSVG()
<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
  What it should look like:
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <text x="4" y="15" style="font-family: FontAwesome" fill="red">&#xf007;</text>
  </svg> What it looks like:
  <object id="svg"></object>
</body>
0 голосов
/ 06 июля 2018

Зачем вам это нужно в теге img? SVG это изображение! Вам не нужно это вставлять что-то еще.

Может быть, я не знаю что-то от вас, но я думаю, что это просто плохая идея от вас.

Мое предложение: поместите SVG в HTML с помощью потрясающих шрифтов напрямую:

Ваша выгода от этого: все современные браузеры поддерживают его без каких-либо ограничений, как в тегах img или как фоновое изображение. 

var divSvg = document.getElementById('svg'),
    pics =
    {
        user: {col: '00a', icon: 'f007'},
        home: {col: '08c', icon: 'f015'},
        folder: {col: '88f', icon: 'f07c'},
        gear: {col: '5a0', icon: 'f013'},
        flag: {col: '05a', icon: 'f024'},
        leaf: {col: '080', icon: 'f06c'}
    },
    svg =
'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">\
    <text x="4" y="24" fill="COLOR" style="font:24px FontAwesome;cursor:pointer">PIC</text>\
</svg>';

for(var title in pics)
{
    var newSVG = svg.replace('PIC', '&#x'+pics[title].icon+';');
    //we put it in "B" tag to have a title because IE
    //does not support title attribute and title tag in SVG
    divSvg.innerHTML += '<b title="' + title + '">' +
                    newSVG.replace('COLOR', '#'+pics[title].col) + '</b>';
}

divSvg.onclick = function(e)
{
    if(e.target.tagName == 'text')
    {
        document.getElementById('output').innerHTML = 'Was clicked on ' +
                                // we take title from "B" tag:
                                e.target.parentNode.parentNode.title;

        /* if you need you can use:
        switch(e.target.parentNode.parentNode.title)
        {
            case 'user': alert('Here some procedure with user');
            case ...     YOUR CODE
            and so on... YOUR CODE
        }*/
    }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<div id="svg"></div><br>
<div id="output">Please click on any icon.</div>
0 голосов
/ 05 июля 2018

Вам не нужно конвертировать данные в base64. Я думаю, что в синтаксисе SVG нет «сумасшедших» символов, поэтому его можно использовать безопасно.

Установите кодировку UTF-8 и поместите туда : 

'data:image/svg+xml;utf8,<svg ... > ... </svg>'
...