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

【问题标题】：CSS 'd' <path> attribute doesn't work in FirefoxCSS 'd' <path> 属性在 Firefox 中不起作用
【发布时间】：2017-02-15 22:50:42
【问题描述】：

我有一个无法直接修改的生成代码，因为它是由巨大的 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。

【问题讨论】：

介意使用 jQuery 或 JavaScript 来实现此行为吗？
没问题，有什么办法
下面的结帐答案
Firefox 尚不支持在 CSS 中设置路径的 d 属性。如果这样做，它将不支持 path() 语法，因为它已经过时了。

标签： css firefox svg

【解决方案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>

【讨论】：

在我的代码中不知何故对我不起作用：我在 Typo3 中使用它，我必须编写 jQuery 而不是 $ ,
这并不能解决 Firefox 不理解 CSS 的事实。
@Pointy 我完全同意你的看法，这就是为什么我问 bourax 他是否愿意接受替代解决方案，然后我发布了这个解决方案并且它有效。