从 HTML/CSS/JS Web 应用程序中的 SVG 中删除描边边框

Question

我一直在尝试从 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>

结果：

Answer 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一起玩的功能，

Answer 2

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

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

Answer 4

svg:focus {
    outline:none;
}
path:focus {
        outline:none;
}