我有一个生成的svg路径代码,我想用CSS文件覆盖它来改变svg形状.
我可以覆盖除’d’之外的所有属性：
我可以覆盖除’d’之外的所有属性：
<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);">Created with Raphaël 2.1.0</desc> <defs style="-webkit-tap-highlight-color: rgba(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.05,-1.9,-5.7)" style="-webkit-tap-highlight-color: rgba(0,0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;"> </path> </svg> </div>
我得到的是覆盖d值的CSS
Unknown property name
在CSS检查员！ ：
#map_outer svg path{
fill: rgb(255,204,0) !important;
d:"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;
}
解决方法
你几乎在这里正确的轨道,你只需要为该属性设置正确的值.它缺少路径(‘..’)：
#map_outer svg path {
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;
}
