在 HTML/CSS/JS Web App 中从 SVG 中删除描边边框答案

【问题标题】：Remove Stroke Border from SVG within HTML/CSS/JS Web App在 HTML/CSS/JS Web App 中从 SVG 中删除描边边框
【发布时间】：2015-02-19 14:24:54
【问题描述】：

我一直在尝试从 d3pie 中删除笔画，但没有运气，没有任何教程，甚至在生成器中也没有删除笔画的选项，只需更改其颜色，我想知道它是否甚至有可能摆脱中风。这是我到目前为止用于甜甜圈图的代码。任何帮助将不胜感激。谢谢

var pie = new d3pie("pieChart", {
    "header": {
        "title": {
            "fontSize": 24,
            "font": "open sans"
        },
        "subtitle": {
            "color": "#999999",
            "fontSize": 12,
            "font": "open sans"
        },
        "location": "top-left",
        "titleSubtitlePadding": 9
    },
    "footer": {
        "color": "#999999",
        "fontSize": 10,
        "font": "open sans",
        "location": "bottom-left"
    },
    "size": {
        "canvasHeight": 400,
        "canvasWidth": 400,
        "pieInnerRadius": "68%",
        "pieOuterRadius": "100%"
    },
    "data": {
        "sortOrder": "label-desc",
        "content": [
            {
                "label": "Natty",
                "value": 1,
                "color": "#fb0000"
            },
            {
                "label": "Nah",
                "value": 1,
                "color": "#000000"
            }
        ]
    },
    "labels": {
        "outer": {
            "format": "none",
            "pieDistance": 32
        },
        "inner": {
            "format": "none",
            "hideWhenLessThanPercentage": 3
        }
    },
    "tooltips": {
        "enabled": true,
        "type": "placeholder",
        "string": "{label}: {value}, {percentage}%",
        "styles": {
            "padding": 10
        }
    },
    "effects": {
        "pullOutSegmentOnClick": {
            "effect": "linear",
            "speed": 400,
            "size": 8
        }
    }
});

<div id="pieChart"></div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="d3pie.min.js"></script>

结果：

【问题讨论】：

如果您在the library's help pages 中找不到答案，您可以file an issue on github 要求作者实现该选项。或者，您可以自己修改库代码，或者在绘制路径后重新选择路径并重置样式属性。

标签： javascript d3.js

【解决方案1】：

svg.selectAll('rect')
        .on("mouseover", function(d) {
          var e = d3.select(this)
          e.attr('stroke', '#2378ae')
          e.attr('stroke-width', '3');
      })

        .on("mouseout", function(d){
           d3.selectAll('rect').attr("stroke", "none"); 
});

这将在那个馅饼中切换我不知道的矩形栏，希望这会给你一些想法，d3 具有使用 css 的功能，

【讨论】：

【解决方案2】：

您应该能够通过 CSS 删除笔触。这就是为什么没有直接选择它的原因。只需在浏览器中打开开发工具，选择 arc 元素以找出适当的类名，然后设置 stroke: none（或任何你想要的）。

【讨论】：

起初它不会覆盖内部，但在我添加了一个 !important 标记后它工作得很好。谢谢。

【解决方案3】：

100% 纯 CSS 解决方案

这可以 100% 完全在 CSS 中完成。因为stroke可以有多种定义方式，并不是所有的都可以用stroke:none来控制，所以可以改用：stroke-opacity: 0，这样会使笔划不可见。

#hover-box:hover {
    stroke-opacity: 0;
}

来源

来自MDN Web Docs - stroke-opacity...

stroke-opacity 属性是一个表示属性，用于定义应用于形状笔划的绘制服务器的不透明度（颜色、渐变、图案等）。

注意：作为演示属性，stroke-opacity 可以用作 CSS 属性。

工作演示

普通笔画...

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
  Sorry, your browser does not support inline SVG.
</svg>

与正常笔划相同的代码，但使用stroke-opacity:0;...

<svg height="80" width="300" style="stroke-opacity:0;">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
  Sorry, your browser does not support inline SVG.
</svg>

【讨论】：