Question

我希望只有当鼠标指向svg的剪辑路径时才能获得mousedown触发器。如果存在两个具有可见部分的svgs，则指向可视部分将导致触发具有定义所单击的可见部分的目标的事件。我怎么能正确地做到这一点？

我写了一个案例here来证明我的问题。它在IE中适用于我，但不适用于Chrome。在Chrome中，点击＆amp;拖动红色部分工作正常。单击并拖动绿色部分将不起作用，除非红色对象（不仅是可见路径）不会共享绿色对象的任何区域。

html代码：

<body>
    <p> clicked object: </p> <button id="test" >id</button>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg1" 
         style="clip-path: url('#clip1'); position:fixed; left:100px; top: 100px; ">
        <g>
            <defs>
                <clipPath id="clip1" style="stroke: black; stroke-width:3; fill: none;">
                    <path d="M0 0 l 400 0 l 0 400 Z"></path>
                </clipPath>
            </defs>
            <rect x="0" y="0" width="400" height="400" fill="green" style="clip-path: url('#clip1'); " id="green1"></rect>
        </g>
    </svg>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg2"
         style="clip-path: url('#clip2'); position:fixed; left:100px; top: 100px; ">
        <g >
            <defs>
                <clipPath id="clip2" style="stroke: black; stroke-width:3; fill: none;">
                    <path d="M0 0 l 400 400 l -400 0 Z"></path>
                </clipPath>
            </defs>
            <rect x="0" y="0" width="400" height="400" fill="red" style="clip-path: url('#clip2'); " id="red"></rect>
        </g>
    </svg>
    <script>
        var zvalmax = 2;
        $("[id^='svg']").draggable({
            scroll: false,
            start: function (e) {
                $(this).css("z-index", ++zvalmax);
            },
            stop: function (e) {
            }
        });
        document.onmousedown = who
        function who(e) {
            var id = e.target.id;
            $("#test").html(id);
        }

    </script>
 </body>

Answer 1

您可以执行以下解决方法：

svg { pointer-events: none; }
svg * { pointer-events: all; }

请参阅fiddle。

请注意，根据SVG 1.1 Second Edition svg根目录本身是否可以成为鼠标事件的直接目标是明确未定义的：

此规范未定义指针事件的行为最基本的'svg'元素用于嵌入的SVG图像引用或包含在另一个文档中，例如，是否嵌入在HTML文档中的rootmost'svg'元素拦截鼠标点击事件;未来的规范可能会定义这种行为，但对于本规范的目的，行为是实现特定的。

这在SVG2中尚未解决。

如何：在剪切区域内的SVG上获取正确的鼠标按下事件

1 个答案: