Question

我的应用程序中有一个小的SVG画布，其中包含一个单击按钮。点击该按钮后，小圆圈会做一些华而不实的工作，并打开适当大小的气泡以适应所有数据。此数据只是左侧自定义项目符号的数据列表;这些文本中的一些是可点击的（绑定到单击事件）并导致其他功能被触发。我的问题是SVG画布的大小永远不会改变。它实际上只能包含用户点击的原始圈子。构成此控件的其余SVG元素在SVG画布的边界之外流动，但由于SVG的溢出设置为可见，因此都可以查看。在所有浏览器中一切正常，但是当我在iPad或Mac上打开应用程序时（无论浏览器如何），情况都会发生变化。看来我的SVG的溢出部分对于浏览器是完全不可见的。任何在Window浏览器上溢出的SVG元素上点火的点击事件在OSX / iOS浏览器上都是完全不可见的（似乎任何点击实际上都落到了溢出的SVG背后的任何内容）。起初我认为这是点击绑定的一个问题，但在搜索和玩它之后，我认为OSX / iOS只是不能很好地处理溢出的SVG。

要以最简单的形式解释我的应用程序中发生了什么，我在这里有一个非常简单的JSFiddle：https://jsfiddle.net/yno8daka/

HTML：

let interestingNumbers = [
    "Prime": [2,3,5,7,11,13],
    "Fibonacci": [1,1,2,3,5,8,13],
    "Square": [1,4,9,16,25,36]
]

var largestNumber = 0

for (kind, numbers) in interestingNumbers {
    for x in numbers {
        for y in kind {
            if x > largestNumber {
                largestNumber = x
            }
        }
    }
}

print("the largest number is = \(largestNumber)")

使用Javascript：

  <svg style="overflow: visible !important" class="canvas" width='70px' height='70px' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <circle id="circle1" stroke="black" fill="black" stroke-width="1" cx="10" cy="10" r="10"></circle>
    <circle id="circle2" stroke="black" fill="black" stroke-width="1" cx="110" cy="110" r="10"></circle>
  </svg>

Circle1位于SVG画布的边界内，而circle2则不是。在Windows浏览器上，您可以单击两个圆圈而不会出现任何问题。在OSX / iOS浏览器上，click事件将针对circle1触发，但不针对circle2触发。有谁知道如何让这个工作？

溢出SVG不会在OSX / iOS上注册点击

0 个答案: