svg，路径标记在 firefox 上不起作用

Question

我正在研究一个简单的 map 淹没与 svg 路径标签但它在火狐或 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>

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>

请参阅规格以获取更长时间和更准确的说明:)。

Answer 2

不确定自 2012 年以来发生了什么变化，但我看不出原始代码和这个答案之间有什么区别，尽管添加了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 中将其打断后使用逗号，在坐标之间使用逗号本身也是有效的，并且完全符合规范：

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