如何：在裁剪区域内的SVG上获取正确的鼠标向下事件 [英] How to: Get correct mouse down event on a SVG within clipped area
问题描述
我只想在鼠标指向svg的剪辑路径时才能获得mousedown触发器。如果有两个svg，带有可见部分，则指向可视部分将导致触发一个事件，该事件的目标定义了单击的可见部分。我如何正确地做到这一点？
我写了一个案例这里显示我的问题。它在IE中适用于我，但不适用于Chrome。在Chrome中，点击&拖动红色部分工作正常。点击并拖动绿色部分将不起作用，除非红色对象（不仅是可见路径）不会共享绿色对象的任何区域。
html代码：
< body>
< p>点击对象：< / p> < button id =test> id< / button>
< svg width =400height =400xmlns =http://www.w3.org/2000/svgversion =1.1id =svg1
style = clip-path：url（'＃clip1'）; position：fixed; left：100px; top：100px;>
< g>
< defs>
< clipPath id =clip1style =stroke：black; stroke-width：3; fill：none;>
<路径d =M0 0 l 400 0 l 0 400 Z>< / path>
< / clipPath>
< / defs>
< / svg>
< svg width =400height =400xmlns =http://www.w3.org/2000/svgversion =1.1id =svg2
style = clip-path：url（'＃clip2'）; position：fixed; left：100px; top：100px;>
< g>
< defs>
< clipPath id =clip2style =stroke：black; stroke-width：3; fill：none;>
<路径d =M0 0 l 400 400 l -400 0 Z>< / path>
< / clipPath>
< / defs>
< / svg>
< script>
var zvalmax = 2;
$（[id ^ ='svg']）。draggable（{
scroll：false，
start：function（e）{
$（this）.css （z-index，++ zvalmax）;
}，
stop：function（e）{
}
}）;
document.onmousedown = who
函数who（e）{
var id = e.target.id;
$（＃test）。html（id）;
}
< / script>
< / body>
您可以这样做：
svg {pointer-events：none; }
svg * {pointer-events：all; }
＃SVG 1.1第二版 >
本规范没有定义
上的指针事件的行为，它是由
引用或包含在另一个文档中的SVG图像的根元素'svg'元素，例如，是否嵌入在HTML文档中的
rootmost'svg'元素拦截鼠标
点击事件;未来的规范可能会定义此行为，但对于本规范的目的
，行为是特定于
的实现。
这在SVG2中尚未解决。
I would like to get mousedown trigger only when the mouse points within clip path of a svg. If there are two svgs, with visible parts, pointing on the visual part will result triggering an event with a target that defined the clicked visible part. How can I do that correctly?
I wrote a case here that demonstrate my problem. It working well for me in IE, but not in Chrome. In Chrome, clicking & dragging the red part work OK. Clicking and dragging the green part will not work, unless the red object (not only the visible path) will not share any area of the green object.
html code:
<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>
You can do a workaround like this:
svg { pointer-events: none; }
svg * { pointer-events: all; }
See fiddle.
Note that according to SVG 1.1 Second Edition whether the svg root itself can be a direct target for mouse events is explicitly undefined:
This specification does not define the behavior of pointer events on the rootmost ‘svg’ element for SVG images which are embedded by reference or inclusion within another document, e.g., whether the rootmost ‘svg’ element embedded in an HTML document intercepts mouse click events; future specifications may define this behavior, but for the purpose of this specification, the behavior is implementation-specific.
This has not yet been resolved in SVG2.
这篇关于如何：在裁剪区域内的SVG上获取正确的鼠标向下事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
