如何製作一個SVG文本元素「click-through-able」？

我有一個SVG文本元素的地圖來命名位置。我希望位置（形狀）是可點擊的，而且它們是，但是由於文本元素位於它們之上，如果有人將鼠標懸停在文本元素上並單擊，則不會發生任何事情，因爲未單擊該形狀：文本元素爲。我怎樣才能做到這一點，如果文本元素被點擊，點擊「通過」它和形狀？如何製作一個SVG文本元素「click-through-able」？

來源

2012-10-16 Cystack

推出的Mozilla爲此，稱爲指針事件 CSS屬性。它最初僅限於SVG圖形，但現在支持在現代瀏覽器最DOM元素：

span.label { pointer-events: none; }

回答這個問題有一些好的信息在舊IE中實現相同的結果：

css 'pointer-events' property alternative for IE

來源

2012-10-16 00:19:41

COOL，不知道它與SVG一起工作，只是「常規」元素 – Cystack

@Cystack'指針事件'屬性從一開始就一直是SVG的一部分（不，它不是由Mozilla引入的 - 儘管Mozilla在svg之外開創了這個屬性的使用）。正如第一個鏈接所說的那樣：「警告：在非SVG元素的CSS中使用指針事件是實驗性的」。 –

另外，指針事件在IE9 + AFAIK的SVG內容中也可以工作。 –

這個CSS添加到文本：

pointer-events: none;

來源

2012-10-16 00:18:31

如果可以使用「<g>」元素中的文本對地圖形狀進行分組，則可以將點擊附加到組而不是形狀。這樣做也會給應用於該組的變換應用於形狀和文本帶來額外的好處。如果分組是不可能的，那麼我同意以前的答案絕對是你最好的選擇。基本上發生了什麼事情是這樣的：大多數人想象一下通過Z-index向下穿透的點擊，但它不會那樣工作。點擊通過DOM向上冒泡，所以如果文本不處理點擊，它會冒泡到父組或容器的下一個DOM元素。這繼續向上，直到它到達最頂端的DOM元素。

來源

2013-05-22 19:30:35 user2009125

如何製作一個SVG文本元素「click-through-able」？

回答

相關問題