Question

我正在用d3构建一些图形。但是我发现使用textpath时Firefox的性能非常慢。我的页面相当复杂，该应用程序在ExtJ上运行，这使HTML代码更加复杂。

这是一个力导向图，该路径始终在刻度线上重绘。因此，我怀疑浏览器要花一些时间来搜索文本路径的href中定义的元素。（我假设它的工作方式类似于在全局范围内搜索组件的查询选择器）。

这里有些代码是我从其他站点复制来进行解释的。我的假设是，浏览器需要一些时间来查找ID = wavy的元素。

Firefox在此问题上是否存在任何已知的性能问题？

//Create the SVG
var svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 120);

svg.append("path")
    .attr("id", "wavy") //Unique id of the path
    .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30") //SVG path
    .style("fill", "none")
    .style("stroke", "#AAAAAA");

//Create an SVG text element and append a textPath element
svg.append("text")
   .append("textPath") //append a textPath to the text element
    .attr("xlink:href", "#wavy") //place the ID of the path here
    .style("text-anchor","middle") //place the text halfway on the arc
    .attr("startOffset", "50%")
    .text("Yay, my text is on a wavy path")

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

这是我的代码的实际呈现HTML。（希望它有助于说明我的问题）

<path id="passiveLink1f26b5e955511c894841ec7d0b5bf915" class="link-path graph-scale-invariant-stroke graph-scale-invariant-stroke-dasharray" d="M-74.49900293826057,50.5028004161668A150.000001,150.000001 0,0,1 75.50099806173942,50.5028004161668" style="stroke: rgb(127, 20, 30); fill: none; stroke-width: 2.39135; stroke-dasharray: 11.9568, 7.17405;"
  x1="-74.49900293826057" y1="50.5028004161668" x2="75.50099806173942" y2="50.5028004161668"></path>
 
<text>
<textPath xlink:href="#passiveLink1f26b5e955511c894841ec7d0b5bf915" startOffset="50%" dominant-baseline="central">➤</textPath>
</text>

Firefox中文本路径的性能降低

0 个答案: