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

Posted 2023-02-22

【中文标题】未关闭的 SVG 路径似乎已关闭

【英文标题】：Unclosed SVG path appears to be closed

【发布时间】：2012-04-30 02:04:58

【问题描述】：

我正在用 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>

我对问题可能是什么感到困惑。如果有任何见解，我将不胜感激。

【问题讨论】：

好的，问题是它正在被填充，这看起来像是关闭了路径。所以任何 svg 工作的一些样板 css 应该包括： path fill: none;

【参考方案1】：

来自SVG specification的相关行，关于filling paths：

填充操作通过执行填充操作来填充打开的子路径，就好像在路径中添加了一个附加的“closepath”命令以连接子路径的最后一个点和子路径的第一个点。

所以，就 fill 而言，末尾有一个隐含的“Z”。但是，对于 stroke，没有隐含的闭包，因此除非您明确添加“Z”，否则它不会绘制连接最后一个点和第一个点的笔划。

如果您只想应用笔触，请使用 CSS 禁用填充：

path 
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;

（我看到您回答了自己的问题，但我认为其他人可能仍然会发现有用的解释。）

【讨论】：

如果这对某人有帮助：fill: transparent; 将关闭路径，但不可见。然后 javascript（鼠标事件）可以检测到不可见区域。

@F***vonEllerts 或者您可以添加一个 Z...？

【参考方案2】：

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

<svg fill="white" fill-opacity="0" stroke="#000" stroke->
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/>
</svg>

【讨论】：

这个fill-opacity="0" 的回答为我节省了很多时间，谢谢

谢谢！对于我永远不想填充的路径，这比使用 CSS 更好，这可能会产生意想不到的副作用。