如何捕获SVG解析错误? [英] How to catch an SVG parsing error?

问题描述

我正在尝试为我的代码编写一个单元测试(使用 qunit )，以将SVG路径生成为字符串.测试之一应该是该东西是否真的是有效的SVG.

I'm trying to write a unit test (using qunit) for my code that generates an SVG path as a string. One of the test should be whether that thing is actually valid SVG at all.

在Chrome浏览器控制台中，只需执行以下操作即可轻松进行测试:

In the Chrome browser console, it's easy to test just by doing this:

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

这将失败，并显示相应的错误消息:

This will fail with an appropriate error message:

错误:属性d ="asdsdsadas"的值无效

Error: Invalid value for attribute d="asdsdsadas"

但是，它也会返回无效的文档，就像可以的一样.

However, it also returns the invalid document, same as if it would have been ok.

当我在qunit中运行此代码时，该错误被打印到浏览器控制台中，但是单元测试仍然成功，因为它实际上并不是例外.我也没有成功尝试抓住它.

When I run this code in qunit, the error is printed into the browser console, but the unit test still succeeds, since it's not actually an exception. I also had no success trying to catch it.

我尝试覆盖console.error，但显然此错误源于更深的层次，与JavaScript的技巧无关.

I've tried overriding console.error, but apparently this error originates on a deeper level that doesn't care about JavaScript trickery.

有人知道如何正确识别此错误吗?

Does anybody know how to properly recognize this error?

推荐答案

从字符串中捕获svg解析错误的正常方法是使用DOMParser()对象.

The normal way to catch an svg parsing error from a string is to use a DOMParser() object.

如果确实将无效的字符串传递给parseFromString()方法，则DOMParser将返回错误文档.

If you do pass an invalid string to the parseFromString() method, then the DOMParser will return an error document.

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标记.
解析器不会对此抱怨.

But the markup you gave in the question is valid svg+xml markup.
Parsers won't complain about it.

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控制台告诉您的是，它无法绘制<path>的d属性中包含的全部片段.

What Chrome console does tell you is that it couldn't draw the whole segments contained in the d attribute of your <path>.

根据规范，

路径数据中错误处理的一般规则是SVG用户 代理程序应在(但不包括)路径之前渲染一个路径"元素 包含路径数据规范中第一个错误的命令.

The general rule for error handling in path data is that the SVG user agent shall render a ‘path’ element up to (but not including) the path command containing the first error in the path data specification.

因此，在您的确切情况下，将不会呈现任何内容，但也不会引发任何错误.

So in your exact case, nothing will be rendered, but no error will thrown either.

以编程方式检测此类错误的唯一方法是获取path.pathSegList.length并检查其是否与您添加到此属性中的段数相对应.

The only way to detect such error programmatically, would be to get your path.pathSegList.length and check that it corresponds to the number of segments you added into this attribute.

但是IMO，您应该在生成值时直接测试您的值.

But IMO, you should test your values directly while generating it.

这篇关于如何捕获SVG解析错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！