TA貢獻(xiàn)2003條經(jīng)驗 獲得超2個贊
這個問題有幾個方面。首先，你是對的，掩碼和剪輯路徑的行為與命中測試不同。
裁剪路徑是一個幾何邊界，給定的點顯然在該邊界之內(nèi)或之外；因此，指針事件必須在裁剪元素的渲染區(qū)域上正常捕獲，但不能在裁剪區(qū)域上捕獲...相比之下，掩碼不是二進(jìn)制轉(zhuǎn)換，而是像素操作，并且完全不同的行為透明和幾乎但不完全透明可能是令人困惑的任意；因此，對于應(yīng)用了遮罩的元素，即使在遮罩不透明度變?yōu)榱愕膮^(qū)域，也必須捕獲指針事件。
其次，剪輯路徑是一種幾何形狀，但就像所有路徑一樣，它可能包含孔洞。<rect>您可以使用一個具有三個子路徑而不是三個<path>，只要clip-rule確保內(nèi)部的子路徑從周圍的形狀中切出即可。
第三，如果該pointer-events屬性應(yīng)用于<svg>HTML 上下文中的元素，其行為會變得……奇怪。pointer-events: none元素上的任何其他值<svg>都會導(dǎo)致整個邊界框接收事件 -為 HTML 元素提出的一種行為，但目前不屬于任何規(guī)范的一部分。
這里的解決方案是pointer-events: none在<svg>元素上設(shè)置，然后pointer-events: painted在子<rect>元素上反轉(zhuǎn)它。
button, svg {
position:absolute;
width:400px;
height:400px
}
button {
background: #0000ff;
cursor: pointer;
}
button:hover {
background: #008800;
}
svg {
pointer-events: none;
}
.over {
fill: #000;
clip-path: url(#clip);
pointer-events: painted;
}
<button></button>
<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<defs>
<clipPath id="clip" clip-rule="evenodd">
<path d="M 20 20 h 360 v 360 h -360 z
M 40 40 v 40 h 40 v -40 z
M 200 290 v 40 h 40 v -40 z" />
</clipPath>
</defs>
<rect y="0" x="0" height="400" width="400" class="over" />
</svg>
TA貢獻(xiàn)1818條經(jīng)驗 獲得超11個贊
剪貼蒙版對于從復(fù)雜的對象中裁剪出部分很有用，但如果您只是使用純色塊，那么創(chuàng)建已經(jīng)有孔的形狀可能同樣容易。
我在下面添加了一個示例。這有幫助嗎？
<svg width="400" heoght="200" viewBox="0 0 400 200">
<text x="100" y="100" text-anchor="middle"
alignment-baseline="middle" onclick="alert('Hello!')"
style="cursor:pointer">Click me</text>
<text x="300" y="100" text-anchor="middle"
alignment-baseline="middle" onclick="alert('Hello?')"
style="cursor:pointer">Not me</text>
<path d="M20 20 180 20 180 180 20 180ZM60 60 60 140 140
140 140 60Z" fill="#3a6" fill-opacity="0.7"
fill-rule="nonzero"/>
<path d="M220 20 380 20 380 180 220 180Z" fill="#f20"
fill-opacity="0.7"/>
</svg>
舉報