字体真棒 SVG 图标不适用于 safari (iOS)答案

【问题标题】：font awesome SVG icons doesn't work on safari (iOS)字体真棒 SVG 图标不适用于 safari (iOS)
【发布时间】：2021-03-21 17:05:18
【问题描述】：

我有以下字体很棒的参考

<link href="css/fontawesome-free-5.12.1-web/css/all.css" rel="stylesheet">     
<script defer src="css/fontawesome-free-5.12.1-web/js/all.js"></script>

另外，我也有高级套件参考

<script src="https://kit.fontawesome.com/7xxxx.js" crossorigin="anonymous"></script>

这两个参考都在 Google Chrome 上呈现图标，但无法在 Safari (iOS) 上运行控制台错误说

NoModificationAllowedError：无法修改对象

这是有问题的代码 all.js fontawesome 库

if (node.parentNode && node.outerHTML) {
         node.outerHTML = newOuterHTML + (config.keepOriginalSource && node.tagName.toLowerCase() !== 'svg' ? "<!-- ".concat(node.outerHTML, " -->") : '');
      } else if (node.parentNode) {
        var newNode = document.createElement('span');
        node.parentNode.replaceChild(newNode, node);
        newNode.outerHTML = newOuterHTML;
      }

我怎样才能使它适用于 safari？

node.outerHTML = newOuterHTML + (config.keepOriginalSource && node.tagName.toLowerCase() !== 'svg' ? "<!-- ".concat(node.outerHTML, " -->") : '');

【问题讨论】：

标签： svg safari font-awesome-5

【解决方案1】：

出于某种原因，font-awesome <i> SVG 中带有 font-awesome 类的标签适用于 Chrome，但不适用于 safari。

所以我不得不替换我的代码

旧代码：

var svg = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 900)
.append("i")
            .attr("class", ({ property }) => {
                const styleClass = getIconClass({ property})
                return styleClass
            })

替换为：

var svg = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 900);

var y = 70;
var x=10;
["\uf083", "\uf0c2", "\uf7ad", "\uf738", "\uf185"].forEach(function(code, i) { 
    svg.append("text")
  .attr("x",x)
  .attr("y",y)
  .attr("style", "font-family: 'Font Awesome 5 Pro'; font-weight: 900; ")
  .attr('font-size', function(d) { return '70px';} )
  .text(function(d) { return  code; }); 
    y+=70;
    x+=70;
});

JS Fiddle

【讨论】：