如何使用Javascript将FontAwesome渲染为SVG图像？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用Javascript将FontAwesome渲染为SVG图像？相关的知识，希望对你有一定的参考价值。
我想渲染一个Font Awesome图标作为SVG动态地使用javascript将其作为图像源提供。我希望我的输出是这样的
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"></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"></text>
</svg>
What it looks like:
<img id="svg">
</body>正如您所看到的，没有Javascript（只是在html中使用SVG），它可以正常工作。
从XML引用外部CSS样式表时，不能使用<img>元素。您需要使用像<object>这样的this answer recommends元素，并在前面加上<?xml-stylesheet?> processing instruction，以便SVG + XML blob能够找到HTML实体的FontAwesome字形。
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"></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"></text>
</svg> What it looks like:
<object id="svg"></object>
</body>为什么你需要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>您无需将数据转换为base64。我认为SVG语法中没有任何“疯狂”字符，因此使用起来是安全的。
将编码设置为UTF-8，然后将<svg>放在那里：
'data:image/svg+xml;utf8,<svg ... > ... </svg>'
以上是关于如何使用Javascript将FontAwesome渲染为SVG图像？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery/javascript 将文本插入 json [重复]
如何使用 javascript 将视频上传到 youtube？