Как поймать ошибку синтаксического анализа SVG?

Я пытаюсь написать модульный тест (используя qunit) для моего кода, который генерирует путь SVG в виде строки. Один из тестов должен заключаться в том, является ли эта вещь действительно действительной SVG вообще.

В консоли браузера Chrome это легко проверить, просто сделав следующее:

$("<svg xmlns="http://www.w3.org/2000/svg"><path d="asdsdsadas" /></svg>")

Произойдет сбой с соответствующим сообщением об ошибке:

Ошибка: недопустимое значение атрибута d= "asdsdsadas"

Однако он также возвращает недействительный документ, как если бы он был были в порядке.

Когда я запускаю этот код в qunit, ошибка выводится в консоль браузера, но модульный тест все равно проходит успешно, так как на самом деле это не исключение. Я также не имел успеха, пытаясь поймать его.

Я пытался переопределить console.error, но, по-видимому, эта ошибка возникает на более глубоком уровне, который не заботится о мошенничестве JavaScript.

Кто-нибудь знает, как правильно распознать эту ошибку?

1 2
javascript svg qunit

1 ответ:

Обычный способ поймать ошибку синтаксического анализа svg из строки-использовать объект DOMParser().

Если вы передадите недопустимую строку в метод parseFromString(), то DOMParser вернет документ об ошибке.

var invalidMarkup = "<svg xmlns=\"http://www.w3.org/2000/svg\"><path d\"M0,0\" /></svg>";
var oParser = new DOMParser();
var doc = oParser.parseFromString(invalidMarkup, 'image/svg+xml');

var failed = doc.documentElement.nodeName.indexOf('parsererror')>-1;

if(failed){
  snippet.log('failed to load the doc : '+doc.documentElement.nodeName);
  }
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Но разметка, которую вы дали в вопросе, является допустимой разметкой svg+xml.
Парсеры на это не жалуются. 

var yourMarkup = "<svg xmlns=\"http://www.w3.org/2000/svg\"><path d=\"asdsdsadas\" /></svg>";
var oParser = new DOMParser();
var doc = oParser.parseFromString(yourMarkup, 'image/svg+xml');

var failed = doc.documentElement.nodeName.indexOf('parsererror') > -1;

if (failed) {
  snippet.log('failed to load the doc : ' + doc.documentElement.nodeName);
} else {
  snippet.log('success');
}
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Что говорит вам консоль Chrome, так это то, что она не может нарисовать все сегменты, содержащиеся в ней в атрибуте d вашего <path>.

По спецификации ,

Общее правило для обработки ошибок в данных Пути состоит в том, что пользователь SVG агент должен отображать элемент ' path’ до (но не включая) путь команда, содержащая первую ошибку в спецификации данных пути.

Таким образом, в вашем точном случае ничего не будет отрисовано, но и ошибки не возникнет.

Единственный способ обнаружить такую ошибку программно, было бы получить ваш path.pathSegList.length и убедитесь, что он соответствует количеству сегментов, добавленных в этот атрибут.

Но ИМО, вы должны проверить свои значения непосредственно при его создании.

1