填充SVG路径不起作用

Question

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

<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");

Answer 1

在svg中未指定viewport，viewBox

这是你的svg文件在矢量编辑器中的样子。很明显它落在观察区域之外，所以它是看不见的。

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

style =＆＃34; border：1px solid red;＆＃34;