Атрибут CSS 'd' <path> не работает в Firefox

Question

У меня есть сгенерированный код, который я МОЖЕТ НЕ изменять напрямую, потому что он генерируется огромным JS-кодом, часть его генерирует форму svg, я могу переопределить его в CSS. но мой код не работает в FF !!!

вот origical код:

<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.

Answer 1

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);

#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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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);-moz-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);-moz-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>