font awesome SVG 图标不适用于 safari (iOS)

Question

我有以下字体真棒参考

<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: The object can not be modified

这是代码 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, " -->") : '');

Answer 1

出于某种原因，font-awesome <i> 标签在 SVG 中带有 font-awesome class 可以在 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

font awesome SVG 图标不适用于 safari (iOS)

font awesome SVG icons doesn't work on safari (iOS)

svg

safari

font-awesome-5