SVG，path标签在火狐浏览器上无法正常工作。

Question

我正在制作一个使用svg path标签的简单地图绘制，但在火狐或IE上无法正常工作（绘制本身不会出现）。

以下是其中的一个示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineAB" d= "M450.59,294.28l3.64-0.29l5.97,8.44l-5.54,4.18l-4.01-1.03l-5.39,0.07l-0.87,3.16l-4.52,0.22l-1.24-1.69l1.6-5.14L450.59,294.28L450.59,294.28z" stroke="blue" stroke-width="3" fill="blue" onclick="alert('Hello')"/>
</svg>

- user1064499

---

Opera、IE 和 Firefox 对我来说都一样。当你点击上面的蓝色图标时，它会提示“Hello”。你是遇到了什么问题吗？ - Robert Longson

图形本身不会出现。 - user1064499

Answer 1

在 d 属性中，不应该使用逗号，而应该使用空格。另外，stroke-width 必须是一个长度（例如 px）。

以下代码应该可以正常工作：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineAB" d= "M450.59 294.28l3.64-0.29l5.97 8.44l-5.54 4.18l-4.01-1.03l-5.39 0.07l-0.87 3.16l-4.52 0.22l-1.24-1.69l1.6-5.14L450.59 294.28L450.59 294.28z" stroke="blue" stroke-width="3px" fill="blue" onclick="alert('Hello')"/>
</svg>

请查看规范，以获得更长且更准确的解释 :).

- evilham

Answer 2

不确定自2012年以来发生了什么变化，但我在原始代码和this answer之间看不出任何区别，但让它们两个对我都“起作用”的是添加viewBox（codepen）：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="400 200 200 200">
<path id="lineAB" d= "M450.59,294.28l3.64-0.29l5.97,8.44l-5.54,4.18l-4.01-1.03l-5.39,0.07l-0.87,3.16l-4.52,0.22l-1.24-1.69l1.6-5.14L450.59,294.28L450.59,294.28z" stroke-width="3" onclick="alert('Hello')"/>
</svg>


<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="400 200 200 200">
<path id="lineAB" d= "M450.59 294.28l3.64-0.29l5.97 8.44l-5.54 4.18l-4.01-1.03l-5.39 0.07l-0.87 3.16l-4.52 0.22l-1.24-1.69l1.6-5.14L450.59 294.28L450.59 294.28z" stroke-width="3px" onclick="alert('Hello')"/>
</svg>

此外，即使在 Firefox 中在命令之前和上一个命令坐标之后使用逗号会导致它出错，但是按照 spec，在坐标之间使用逗号是有效的并且完全没有问题的。

coordinate-pair:
    coordinate comma-wsp? coordinate
comma-wsp:
    (wsp+ comma? wsp*) | (comma wsp*)
comma:
    ","
wsp:
    (#x20 | #x9 | #xD | #xA)

- Adam Jagosz