查找 SVG 路径的填充边
Finding the filled side of an SVG path
我正在创建一个动画，相机沿着从 M 到 z 的路径移动（闭合路径）。随着相机的移动，我需要知道封闭路径内的哪一侧。
由于路径的内部是由顺时针移动形成的（在nonzero的默认fill-rule中），我假设内部总是在路径的右侧。
但是，我遇到了填充区域在路径左侧的情况。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.986 26.986"><path d="M.614 2.145V24.84C.614 26.028 1.575 26.986 2.759 26.986H24.226C25.41 26.986 26.372 26.027 26.372 24.84V2.145C26.372 .963 25.409 0 24.225 0H2.759C1.575 0 .614 .963 .614 2.145zM8.778 20.82C8.778 22.353 7.534 23.599 6.001 23.599C4.466 23.599 3.224 22.353 3.224 20.82C3.224 19.289 4.466 18.043 6.001 18.043C7.534 18.043 8.778 19.289 8.778 20.82zM23.696 5.596C23.696 7.131 22.45 8.375 20.917 8.375C19.386 8.375 18.142 7.131 18.142 5.596C18.142 4.063 19.386 2.819 20.917 2.819C22.45 2.818 23.696 4.062 23.696 5.596z"/>
<circle cx="0.614" cy="2.145" r="2" fill="red"/>
<path d="M.614 2.145V24.84" stroke="blue" />
</svg>
我知道我们可以通过多边形方法检查典型点是否在闭合路径内。
我想知道从M移动到z时是否有更简单的方法来找到封闭路径的内部？
我只需要知道从M移动到z时，闭合路径的内部是在右侧还是左侧相机.
第一个假设
...the inside of a path is formed by clockwise move...
仅当路径为 non-overlapping 且未定义孔时才为真。如果您的路径从不与自身交叉并且没有洞，则内部将始终在您的右边假设您沿着顺时针方向移动。但是，在您的示例中，从红点到蓝线的移动是逆时针的。
这个问题的一般解决方案将是漫长而费力的。但是，根据脚本的设计，它可能会简单得多。如果您总是顺时针绘制图形（如您的示例所示），则当您遵循相同的点顺序时，内部在您的右边，如果您颠倒点的顺序，则在您的左边。请注意，在您的示例中，您正在颠倒点的顺序 - 路径从最后一个点 (z) 到第一个 (M) 闭合。
如果没有，此过程应该有效：
- 从相机所在的点和显示它指向的位置的矢量开始。
- 将此向量旋转任何大于 0 且小于 π 的角度（即向左）。
- 从相机的角度跟随矢量，找出它与您的路径相交的次数（当前路段除外）。如果这个数字是偶数，则内部位于相机的右侧。如果数字是奇数，则在左边。
这是可行的，但绝非微不足道。对于第三步，您可以将路径的边界框用作“无穷大”。要排除 当前段 ，如果一个段的极值之一属于另一个段，则查找两个段交集的过程应该 return false。如果两个线段平行，它也应该 return false。您还需要在特殊点（例如顶点）中决定您想要的行为。
我正在创建一个动画，相机沿着从 M 到 z 的路径移动（闭合路径）。随着相机的移动，我需要知道封闭路径内的哪一侧。
由于路径的内部是由顺时针移动形成的（在nonzero的默认fill-rule中），我假设内部总是在路径的右侧。
但是，我遇到了填充区域在路径左侧的情况。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.986 26.986"><path d="M.614 2.145V24.84C.614 26.028 1.575 26.986 2.759 26.986H24.226C25.41 26.986 26.372 26.027 26.372 24.84V2.145C26.372 .963 25.409 0 24.225 0H2.759C1.575 0 .614 .963 .614 2.145zM8.778 20.82C8.778 22.353 7.534 23.599 6.001 23.599C4.466 23.599 3.224 22.353 3.224 20.82C3.224 19.289 4.466 18.043 6.001 18.043C7.534 18.043 8.778 19.289 8.778 20.82zM23.696 5.596C23.696 7.131 22.45 8.375 20.917 8.375C19.386 8.375 18.142 7.131 18.142 5.596C18.142 4.063 19.386 2.819 20.917 2.819C22.45 2.818 23.696 4.062 23.696 5.596z"/>
<circle cx="0.614" cy="2.145" r="2" fill="red"/>
<path d="M.614 2.145V24.84" stroke="blue" />
</svg>
我知道我们可以通过多边形方法检查典型点是否在闭合路径内。
我想知道从M移动到z时是否有更简单的方法来找到封闭路径的内部？
我只需要知道从M移动到z时，闭合路径的内部是在右侧还是左侧相机.
第一个假设
...the inside of a path is formed by clockwise move...
仅当路径为 non-overlapping 且未定义孔时才为真。如果您的路径从不与自身交叉并且没有洞，则内部将始终在您的右边假设您沿着顺时针方向移动。但是，在您的示例中，从红点到蓝线的移动是逆时针的。
这个问题的一般解决方案将是漫长而费力的。但是，根据脚本的设计，它可能会简单得多。如果您总是顺时针绘制图形（如您的示例所示），则当您遵循相同的点顺序时，内部在您的右边，如果您颠倒点的顺序，则在您的左边。请注意，在您的示例中，您正在颠倒点的顺序 - 路径从最后一个点 (z) 到第一个 (M) 闭合。
如果没有，此过程应该有效：
- 从相机所在的点和显示它指向的位置的矢量开始。
- 将此向量旋转任何大于 0 且小于 π 的角度（即向左）。
- 从相机的角度跟随矢量，找出它与您的路径相交的次数（当前路段除外）。如果这个数字是偶数，则内部位于相机的右侧。如果数字是奇数，则在左边。
这是可行的，但绝非微不足道。对于第三步，您可以将路径的边界框用作“无穷大”。要排除 当前段 ，如果一个段的极值之一属于另一个段，则查找两个段交集的过程应该 return false。如果两个线段平行，它也应该 return false。您还需要在特殊点（例如顶点）中决定您想要的行为。