未关闭的SVG路径似乎已关闭

bal*_*law 34 javascript svg path d3.js

我正在用d3写一些东西,我遇到了一个奇怪的问题.闭合的路径以'Z'字符结尾,但无论是否包含Z,我所做的每条路径都会关闭(和填充).即使与从规范中复制的示例单独隔离也会发生这种情况 例如:

<svg>
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/>
</svg>
Run Code Online (Sandbox Code Playgroud)

我很困惑,问题可能是什么.我很感激任何见解.

mbo*_*ock 54

关于填充路径SVG规范中的相关行:

的填充操作可如同一个额外的"closepath"命令被添加到路径的子路径的最后一个点与子路径的第一点连接进行填充操作填充打开的子路径.

因此,就填充而言,最后有一个隐含的"Z".然而,对于中风,有没有隐含的关闭,所以不会绘制最后一个点连接到第一点的行程,除非你明确地添加一个"Z".

如果您只想应用笔划,请使用CSS禁用填充:

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}
Run Code Online (Sandbox Code Playgroud)

(我看到你回答了自己的问题,但我认为其他人可能仍然会找到有用的解释.)


SYK*_*SYK 9

我对答案投了赞成票,但是当您尝试将 svg 转换为画布并希望防止 svg 路径填充或关闭时,有时 css 不是一个选项。等效于 css 解决方案,但没有 css ......

<svg fill="white" fill-opacity="0" stroke="#000" stroke-width="1.5">
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/>
</svg>
Run Code Online (Sandbox Code Playgroud)

  • 这个带有 `fill-opacity="0"` 的答案节省了我很多时间,谢谢 (2认同)