填充 SVG 路径不起作用答案

【问题标题】：Fill SVG path does not work填充 SVG 路径不起作用
【发布时间】：2017-11-28 19:56:02
【问题描述】：

我正在尝试使用以下代码填充路径颜色：

<path id="svg_23" d="m448,1395.555556c0,0 62.222222,1.777777 62.222222,1.777777c0,0 78.222222,-72.888889 78.222222,-72.888889c0,0 -3.555555,-92.444444 -3.555555,-92.444444c0,0 -135.111111,0 -135.111111,0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#000000"/>

d3.select("#svg_23").style("fill","red");

【问题讨论】：

你可以填写polygons而不是path's
填充对我来说效果很好。如果您创建一个minimal reproducible example，我们或许可以进一步了解为什么它不适合您。
@user1767754 这不是真的，SVG 中的路径填充得很好。
同样无法重现问题：jsfiddle.net/uxt27vn8/1
原来路径具有 fill-opacity="0" 属性，这使得该代码无用......谢谢。

标签： javascript d3.js svg

【解决方案1】：

在 svg 中未指定 viewport、viewBox

这就是您的 svg 文件在矢量编辑器中的样子。很明显它落在了可视区域之外，所以它是不可见的。

要将形状返回可见区域，请添加viewport、viewBox

width="200" heght="200" viewBox="350 1150 300 300"

<svg width="200" heght="200" viewBox="370 1170 300 300" style="border:1px solid red;">

<path id="svg_23" d="m448,1395.555556c0,0 62.222222,1.777777 62.222222,1.777777c0,0 78.222222,-72.888889 78.222222,-72.888889c0,0 -3.555555,-92.444444 -3.555555,-92.444444c0,0 -135.111111,0 -135.111111,0z" stroke-dasharray="0" stroke-width="5" stroke="#000000" fill="red"/>

</svg>

红框表示 SVG 的范围。它是调整所需的，现在可以删除。

~~style="border:1px 纯红色；"~~

【讨论】：

@Robert Longson 我对了解情况的经验很少，我做错了什么吗？为什么是减号？
不知道你为什么要找我写 cmets （我没有收到通知，因为我没有评论你的答案，所以你很幸运我看到了这个）。如果我猜的话，我会说你被否决了，因为这不是一个正确的答案。 OP 在comments their problem was fill-opacity="0" 中声明，鉴于它不是问题的信息，因此很难诊断。当你写下你的答案时，这条评论是可见的。
@RobertLongson 感谢您的回答。我想告诉你很久了，但没有机会。几年来，我一直在阅读您对 stackoverflow 网站上问题的回答。我一直很钦佩您在 SVG 领域的知识深度和广度。请再看一次我的回答，昨天我立即删除了作者问题中样式中的所有错误，包括fill-opacity =" 0 "。
@RobertLongson 该代码适用于这些错误，但没有错误的样式jsfiddle.net/4b9k2475 svg 图形不可见的主要原因， - 定位错误，我在我的答案中发布，为此我被否决了