CSS 更改 <path> 的 d 属性 [英] CSS change d property of <path>

问题描述

我有一个生成的 svg 路径代码，我想用 CSS 文件覆盖它以更改 svg 形状.我可以覆盖除d"之外的所有属性:

I have a generated svg path code, I want to override it with CSS file to change the svg shape. I could override all the properties except 'd':

这是生成的代码(我不能直接改):

Here is the generated code (I can't change it directly):

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

这是覆盖 d 值的 CSS，我得到 <块引用>

未知的属性名称

Unknown property name

在 CSS 检查器中！！！:

in the CSS inspector !!! :

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

推荐答案

您在这里几乎走上了正轨，您只需要为属性设置正确的值.它缺少path('..'):

You're almost on the right track here, you just need to set the correct value for the property. It's missing path('..'):

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

这篇关于CSS 更改 &lt;path&gt; 的 d 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！