svg顶部和底部凹陷

Question

我创建了一个以网格方式绘制动态数量的水平和垂直线的svg。我现在想要完成的是凹陷曲线svg的顶部和底部，以便线条自然地与svg的坐标一起弯曲，同时保留这些坐标。因此，如果viewBox为“0 0 100 100”，则在整个svg的凹陷弯曲之后，单击最顶部的极左或极右会将y值设置为0，同时在中间点击级别根本不应该注册点击。要在x = 50时得到y等于0，鼠标必须定位得更低，以适应曲线。

我当然可以通过编程方式对每一行进行曲线处理，但这并不能解决我点击并获得适当坐标以匹配线条弯曲的问题。

我想过弯曲容器div的边框，但是svg不符合那个形状。我还想过将svg放在一个svg容器内的路径中，但如果可能的话，我没有看到任何在线发生这种情况的例子。

我也想过使用变换，但是除非我错过了什么，否则它们似乎都不适合这项任务。

非常感谢任何帮助。

Answer 1

1. SVG仅支持affine transformations，因此您必须通过编程/数学方法在非仿射空间中查找单独的线描述和计算事件位置。

2. 要限制区域内的事件位置，默认情况下SVG clip paths或CSS clip paths会阻止事件从元素的剪切部分上升。如果这没有帮助，您可以使用pointer-events属性进一步微调反应。