我每天都感謝開發者的回復。如何單擊具有更多邊界的 svg 線標記？這是我的線路標簽。這是我想要點擊ling標簽的邊界 <body> <svg height="210" width="500"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:5;box-shadow: 10px 5px 5px red;" ></line> </svg> </body> <script> document .getElementsByTagName("line")[0] .addEventListener("click", function(e) { console.log("lineClick", e); }); </script>如何設置更多的點擊事件邊界？
1 回答
撒科打諢
TA貢獻1934條經驗 獲得超2個贊
在第一條線的頂部添加第二條更寬的不可見線，捕獲其點擊并將其分派到下面的可見線。
<body>
<svg height="210" width="500">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<line
x1="0"
y1="0"
x2="200"
y2="200"
style="stroke:rgb(255,0,0);stroke-width:5;box-shadow: 10px 5px 5px red;"
></line>
<line onclick="document
.getElementsByTagName('line')[0].dispatchEvent(new Event('click'));"
x1="0"
y1="0"
x2="200"
y2="200"
style="stroke:none;stroke-width:40;pointer-events:all;cursor:pointer"
></line>
</svg>
</body>
<script>
document
.getElementsByTagName("line")[0]
.addEventListener("click", function(e) {
console.log("lineClick", e);
});
</script>
- 1 回答
- 0 關注
- 114 瀏覽
添加回答
舉報
0/150
提交
取消