代码之家 › 专栏 › 技术社区 › anlumo

如何捕获SVG解析错误?

qunit svg javascript

anlumo · 技术社区 · 8 年前

我正在尝试编写单元测试(使用 量子单位 )我的代码将SVG路径生成为字符串。其中一个测试应该是这个东西是否实际上是有效的SVG。

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

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

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

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

但是,它也会返回无效的文档,就像它本来是正常的一样。

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

我试过超越 console.error ,但显然,这个错误源于更深层次,它不在乎JavaScript的欺骗。

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

1 回复 | 直到 8 年前

Kaiido NickSlash 8 年前

从字符串中捕获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');
}

<!-- 提供“代码段”对象,请参见http://meta.stackexchange.com/a/242144/134069-->
<脚本src=“http://tjcrowder.github.io/simple-snippets-console/snippet.js“></script>

Chrome控制台告诉你的是,它无法绘制包含在 d 您的属性 <path> .

Per specs ,

路径数据中错误处理的一般规则是SVG用户代理应呈现路径元素,直到(但不包括)路径包含路径数据规范中的第一个错误的命令。

因此,在您的确切情况下,不会呈现任何内容,但也不会抛出任何错误。

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

但在IMO中,您应该在生成值时直接测试值。

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前