Я строил какой-то график с помощью d3.Но я обнаружил, что при использовании textpath производительность в Firefox очень низкая.Моя страница довольно сложная, и приложение работает на ExtJ, что делает HTML-код еще более сложным.
Это ориентированный на силу граф, и путь всегда перерисовывается на тике.Таким образом, я подозреваю, что браузер тратит время на поиск элемента, который был определен в href в textpath.(Я предполагаю, что он работает как селектор запросов, который осуществляет глобальный поиск компонента).
Вот код, который я просто скопировал с другого сайта для пояснения.Я предполагаю, что браузер требует времени для поиска элемента с 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>