Question

我有一系列形状，我希望用户能够在形状上的任何位置单击以作为拖放功能的一部分进行拾取。所有这些形状都以矩形为界。

例如：

<g id="shape1" fill="none" stroke="black">
    <rect x="0" y="0" width="100" height="100"/> 
    <circle cx="50" cy="50" r="50"/>
</g>
<g id="shape2" fill="none" stroke="black">
    <rect x="0" y="0" width="100" height="100"/> 
    <line x1="0" y1="0" x2="50" y2="100"/> 
    <line x1="100" y1="0" x2="50" y2="100"/>
</g>

我已经将所有拖放部件都工作了，问题是所有这些形状都必须有fill =“none”，这样你才能看到任何可能在它们下面的东西。这意味着即使它们受到矩形的限制，用户也必须在物理上点击其中一条线以便拾取它，而不是像我想要的那样点击形状上的任何地方。

我最初的想法是使用fill =“white”，然后设置opacity =“0”或一些非常低的值，但这也适用于笔画，所以这没有用。

关于如何让这个工作的任何想法？

Answer 1

Pointer-events可能就是你想要的。

以下是一些例子：

Answer 2

事实证明我离我想的更近了。谁知道他们有填充不透明属性......

<g id="shape1" fill="white" stroke="black" fill-opacity="0">
    <rect x="0" y="0" width="100" height="100"/> 
    <circle cx="50" cy="50" r="50"/>
</g>
<g id="shape2" fill="white" stroke="black" fill-opacity="0">
    <rect x="0" y="0" width="100" height="100"/> 
    <line x1="0" y1="0" x2="50" y2="100"/> 
    <line x1="100" y1="0" x2="50" y2="100"/>
</g>

在SVG中有一种方法可以在填充=“无”的任何地方抓取形状

2 个答案: