Решение, которое я использовал, это:
<svg>
<line x1="100" y1="100" x2="500", y2="100" style="stroke:black; stroke-width: 2"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
<text x="150" y="105" style="fill:black">Hello World!</text>
</svg>
Добавляется дублирующийся текстовый элемент с атрибутами штриха и ширины штриха. Инсульт должен соответствовать цвету фона, а ширина штриха должна быть достаточно большой, чтобы создать «splodge», на котором можно записать фактический текст.
Немного взлома и есть потенциальные проблемы, но работает для меня!
Ваш gatherOutput.cgi не должен зацикливаться, если файл не существует. Вместо этого верните в свой запрос AJAX статус о том, что файл еще не существует, а затем подождите (используя setInterval или setTimeout) и повторите попытку через столько секунд.
Это будет НАМНОГО проще на вашем сервере. Для пользователя вы по-прежнему можете показать изображение загрузки или что-то еще, что даст им знать, что процесс все еще происходит в фоновом режиме.