如何使用Javascript将FontAwesome渲染为SVG图像？
Jan*_*hta 6 html javascript svg font-awesome
我想渲染一个FontAwesome图标作为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),它可以正常工作.
<img>从 XML 引用外部 CSS 样式表时不能使用元素。您需要使用<object>像此答案推荐的元素，并预先添加<?xml-stylesheet?> 处理指令，以便 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>| 归档时间： |
|
| 查看次数： |
995 次 |
| 最近记录： |