CSS 改变 <path> 的 stroke 属性答案

【问题标题】：CSS change stroke property of <path>CSS 改变 <path> 的 stroke 属性
【发布时间】：2019-04-16 02:21:28
【问题描述】：

我有一个生成的 svg 路径代码，我想用 CSS 覆盖它，这样我不希望默认生成任何笔画。如何覆盖 stroke 的属性并将其设置为 none。

代码：

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

它确实设置为无，但它也会删除图表上的线条。

之前：

添加stroke: none后

我不想失去图表上的线条。知道如何解决这个问题吗？谢谢！

【问题讨论】：

在 CSS 作品中添加 stroke: none;。也许您需要为您的路径提供id 或class 或使用.container svg path:nth-of-type...
这些点是根据图表数据动态生成的，我不确定我是否可以做第n种类型，如果可以，我不知道该怎么做。将类添加到路径时也是如此...
你能添加一个链接到你的代码吗？这些圈子可能在不同的组中。

标签： html css svg

【解决方案1】：

你可以设置：

.container svg path {
   stroke: #cecece;
}

【讨论】：

【解决方案2】：

你可以用它来去掉边框

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

【讨论】：

感谢您的回答，但是当我将 stroke-width 设置为 0 时也会发生同样的情况，它会使图表上的线条消失，附上图片
抱歉问题有点误会了

【解决方案3】：

我找到了一种方法，虽然不是通过 CSS，但我将 lineWidth:0 属性添加到了 plotOptions 内的图表中，这样就成功了。谢谢大家的帮助！

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

【讨论】：