svg,路径标签在 Firefox 上不起作用

Posted

技术标签:

【中文标题】svg,路径标签在 Firefox 上不起作用【英文标题】:svg, path tag does not work on firefox 【发布时间】:2012-09-21 14:19:15 【问题描述】:

我正在制作一张带有 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- fill="blue" onclick="alert('Hello')"/>
</svg>

【问题讨论】:

Opera、IE 和 Firefox 对我来说都一样。我看到一个蓝色斑点,当您单击它时会提醒您好。什么不适合你? 绘图本身没有出现 【参考方案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- fill="blue" onclick="alert('Hello')"/>
</svg>

请参阅spec 以获得更长更准确的解释:)。

【讨论】:

以上是关于svg,路径标签在 Firefox 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

CSS - 剪辑路径 svg 在 Firefox 上不起作用

SVG 悬停在 Firefox 中不起作用

css重置后强标签在firefox上不起作用

为啥这个 CSS 转换在锚点内的 SVG 上不起作用

元素未显示并且:悬停在.svg上不起作用[重复]

剪辑路径在 Firefox [% 值] 中不起作用