CSS'd'<path>属性在Firefox中不起作用

时间:2017-02-14 14:50:18

标签: css firefox svg

我有一个生成的代码,我不能直接修改,因为它是由一个巨大的JS代码生成的,它的一部分生成一个svg形状,我可以在CSS中覆盖它。但我的代码在FF中不起作用!!!

这是原始代码:

<div id="map_outer" style="position: absolute; left: 3px; z-index: 1;">
<svg height="35" version="1.1" width="35" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
</defs>
<path fill="#cecece" stroke="#808080" d="M503.7,743.8C694,647.1999999999999,636.6,326.74999999999994,348.1,334.09V205.39L120.00000000000003,400.39L348.1,606.19V474.59000000000003C589,469.09000000000003,578,677.3900000000001,503.70000000000005,743.8900000000001Z" stroke-width="40" stroke-opacity="1" fill-opacity="1" transform="matrix(0.05,0,0,0.05,-1.9,-5.7)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
</svg>
</div>

这是我的CSS代码,它覆盖生成的'd'属性:

#map_outer svg path{
    fill: rgb(255, 204, 0) !important;
    d:path("M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z") !important;
    stroke-width: 0;
}

代码在Firefox中不起作用。但适用于Chrome。

enter image description here

1 个答案:

答案 0 :(得分:1)

&#13;
&#13;
$query = 'SELECT Users.user_id, 
                 Users.name,
                 Comments.comment FROM User JOIN Comments ON Users.user_id= Comments.user_id_fk
                         ';
&#13;
var pathD = "M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z";

$("#map_outer svg path").attr("d", pathD);
&#13;
#map_outer svg path{
    fill: rgb(255, 204, 0) !important;
    d:path("M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z") !important;
    stroke-width: 0;
}
&#13;
&#13;
&#13;