如何将 font awesome 图标添加到通过 svg.js 绘制的 svg 圆圈？

Question

我正在使用 svg.js，现在我遇到了一个需要向 svg 圆圈添加超赞字体图标的情况。我几乎可以通过 vanilla js 添加图标。但是为此我想专门使用 svg.js 。例如。我可以发现 svg.js 有 text.plain() && text.text() 方法，它几乎正在打印我提供的 Unicode（尽管这是预期的）。那么我应该如何创建svg.js中的图标呢？任何帮助将不胜感激！实际上，我正在为以下代码片段寻找 svg.js 等效代码。

 let text = document.createElementNS(SVGNamespace, 'text');
 text.classList.add(someClass);
 text.setAttribute('x', xCordinate);
 text.setAttribute('y', yCordinate);
 text.setAttribute('font-size', fontSize);
 text.setAttribute('fill', '#000');
 text.setAttribute('text-anchor', 'middle');
 text.setAttribute('dominant-baseline', 'middle');
 text.innerHTML = unicode; // This is the unicode for font awesome icon

在Css这边，我会有

.someClass{
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
}

Answer 1

我 downloaded the font-awesome zip file 并选择了我在 fontawesome-free-5.15.1-web.zip/fontawesome-free-5.15.1-web/svgs/brands/500px.svg 中找到的第一个图标。如果您在编辑器中打开 500px.svg，您会发现 viewBox 属性和一个带有 d="" 属性的 <path> 元素。复制作为图标路径的 d 属性。它是一堆命令和坐标，适合 viewBox.

正如您在下面的代码片段中看到的，我使用 viewBox 定义了我的新 SVG，并使用路径 d 属性来获取 svg.js 来绘制它。

const fontAwesomeIcon = "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7 8.5-28.6 53 0 89.4-10.1 89.4-64.4 0-61-77.1-89.6-116.9-44.6-23.5 26.4-17.6 42.1-17.6 157.6 50.7 31 118.3 22 160.4-20.1 24.8-24.8 38.5-58 38.5-93 0-35.2-13.8-68.2-38.8-93.3-24.8-24.8-57.8-38.5-93.3-38.5s-68.8 13.8-93.5 38.5c-.3.3-16 16.5-21.2 23.9l-.5.6c-3.3 4.7-6.3 9.1-20.1 6.1-6.9-1.7-14.3-5.8-14.3-11.8V20c0-5 3.9-10.5 10.5-10.5h241.3c8.3 0 8.3 11.6 8.3 15.1 0 3.9 0 15.1-8.3 15.1H130.3v132.9h.3c104.2-109.8 282.8-36 282.8 108.9 0 178.1-244.8 220.3-310.1 62.8zm63.3-260.8c-.5 4.2 4.6 24.5 14.6 20.6C306 56.6 384 144.5 390.6 144.5c4.8 0 22.8-15.3 14.3-22.8-93.2-89-234.5-57-238.3-38.2zM393 414.7C283 524.6 94 475.5 61 310.5c0-12.2-30.4-7.4-28.9 3.3 24 173.4 246 256.9 381.6 121.3 6.9-7.8-12.6-28.4-20.7-20.4zM213.6 306.6c0 4 4.3 7.3 5.5 8.5 3 3 6.1 4.4 8.5 4.4 3.8 0 2.6.2 22.3-19.5 19.6 19.3 19.1 19.5 22.3 19.5 5.4 0 18.5-10.4 10.7-18.2L265.6 284l18.2-18.2c6.3-6.8-10.1-21.8-16.2-15.7L249.7 268c-18.6-18.8-18.4-19.5-21.5-19.5-5 0-18 11.7-12.4 17.3L234 284c-18.1 17.9-20.4 19.2-20.4 22.6z"

const canvas = SVG()
  .viewbox(0, 0, 448, 512) // set the viewBox to match font-awesome icon
  .size('100%', 300) // set any size you want
  .attr('id', 'canvas') // add an id or class so that you can style via CSS
  .addTo('body') // add the SVG to the <body> element

canvas.path(fontAwesomeIcon)  // draw the font-awesome icon
canvas.circle(512) // draw a cirle

body {
  background-color: black;
}

#canvas {
  background-color: white;
}
#canvas circle {
  fill: none;
  stroke: red;
  stroke-width: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>

当然你也可以移动图标。我喜欢图标在圆圈中更居中，所以我添加了：

canvas.path(fontAwesomeIcon)  // draw the font-awesome icon
  .scale(.85)
  .move(50,10)

我还向 SVG 添加了一个 id 属性，这样我就可以轻松地从 CSS 定位圆圈。你不必那样做，但我喜欢在 CSS 中做我的造型。如果你想为没有 CSS 的圆元素设置相同的样式，你可以 canvas.circle(512).stroke({ color: 'red', width: 5 }).fill('none').

CSS-Tricks 在 their almanac.

中获得了有关样式化 SVG 元素的更多信息

编码愉快 ;)

如何将 font awesome 图标添加到通过 svg.js 绘制的 svg 圆圈？

How to add font awesome icon to a svg circle drawn via svg.js?

svg

svg.js