В SVG есть способ получить фигуру в любом месте, когда она имеет заполнение = "нет"

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 , вероятно, то, что вы хотите здесь.

Вот несколько примеров:

• http://dev.w3.org/SVG/profiles/1.1F2/test/svg/interact-pevents-07-t.svg
• http://dev.w3.org/SVG/profiles/1.1F2/test/svg/interact-pevents-08-f.svg
• http://dev.w3.org/SVG/profiles/1.1F2/test/svg/interact-pevents-09-f.svg

Answer 2

Оказывается, я был намного ближе, чем думал.Кто знал, что у них есть атрибут fill-opacity ...

<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>