<path>的CSS更改笔触属性

时间:2019-04-16 02:21:28

标签: html css svg

我有一个生成的svg路径代码,我想用CSS覆盖它,这样我就不需要默认生成的任何笔触。如何覆盖笔画的属性并将其设置为无。

代码:

<div class="container" 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:

.container svg path {
   stroke: none;
}

它设置为none,但是也会删除图形上的线。

之前:

enter image description here

添加了stroke: none

之后

enter image description here

我不想丢失图表上的线条。有什么办法解决此问题吗? 谢谢!

3 个答案:

答案 0 :(得分:0)

您可以使用它摆脱边界

.container svg path {
   stroke-width: 0;
}

答案 1 :(得分:0)

您可以设置:

.container svg path {
   stroke: #cecece;
}

答案 2 :(得分:0)

我找到了一种方法,但不是通过CSS,而是在lineWidth:0内的图表中添加了plotOptions属性,就达到了效果。 谢谢大家的帮助!

  plotOptions: {
                                      area: {
                                          marker: {
                                            symbol: 'circle',
                                            lineWidth: 0,
                                              enabled: true,
                                              states: {
                                                  hover: {
                                                      enabled: true,
                                                      lineWidth: 0;
                                                  }
                                              }
                                          }
                                      },
                                  }