JavaScript 및 SVG : onClick 이벤트의 클릭 가능 영역을 어떻게 늘립니까?

내 스크립트는 스트로크 너비가 3 인 화면에 선을 그립니다. 선의 크기는 시각적으로 이상적이지만 클릭하기는 쉽지 않습니다.JavaScript 및 SVG : onClick 이벤트의 클릭 가능 영역을 어떻게 늘립니까?

<html> 
<head> 
<script> 
function selectStrand(evt) { 
    current_id = evt.target.getAttributeNS(null, "id"); 

    document.getElementById('main').innerHTML = current_id; 
} 
</script> 
</head> 

<body> 
Selected line: <span id="main"></span> 

<?xml version="1.0"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1000 1000"> 
    <g id="buffer" transform="translate(10,0)"> 
     <line id="blue-blue" x1="50" y1="50" x2="500" y2="50" style="stroke:blue; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-orange" x1="50" y1="70" x2="500" y2="70" style="stroke:orange; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-green" x1="50" y1="90" x2="500" y2="90" style="stroke:green; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-brown" x1="50" y1="110" x2="500" y2="110" style="stroke:brown; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-grey" x1="50" y1="130" x2="500" y2="130" style="stroke:grey; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-khaki" x1="50" y1="150" x2="500" y2="150" style="stroke:khaki; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-red" x1="50" y1="170" x2="500" y2="170" style="stroke:red; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-black" x1="50" y1="190" x2="500" y2="190" style="stroke:black; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-yellow" x1="50" y1="210" x2="500" y2="210" style="stroke:yellow; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-purple" x1="50" y1="230" x2="500" y2="230" style="stroke:purple; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-pink" x1="50" y1="250" x2="500" y2="250" style="stroke:pink; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-cyan" x1="50" y1="270" x2="500" y2="270" style="stroke:cyan; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
    </g> 
    </g> 
</svg> 

</body> 
</html>

클릭하기가 쉽도록 라인의 각 주변을 증가하는 간단한 방법이 있나요 : 거친 예를 들어

출처

2012-02-02 renosis

각 줄마다 더 큰 획 너비로 투명 선을 그려보고 그 위에 onclick을 설정하십시오.

출처

2012-02-02 18:05:27

좋아, 고마워. 그게 효과적이고 그것이 최선의 방법 인 것처럼 보입니다. – renosis

예제에서 id = buffer 인 루트 또는 그룹에 클릭 이벤트 리스너를 추가하고 클릭 한 이벤트의 대상을 살펴볼 수 있습니다. 그렇게하면 각 요소에 하나가 아닌 하나의 이벤트 수신기 만 필요합니다. html에 svg 인라인을 포함 할 때 ''부분은 필요하지 않습니다.이 부분은 무시됩니다. –

아 참 고마워, 에릭! – renosis

위 답변에 대한 변형입니다. 시원한 선택 효과 그룹의 경우 위에가는 선이있는 그룹에서 각가는 선과 투명 선이 결합됩니다. onclick을 그룹으로 설정 한 다음 onclick에서 두꺼운 선의 투명도를 애니메이션으로 만듭니다.

출처

2012-02-03 09:37:17 David

예, 전체적인 메카닉을 알아 냈을 때 나는 onClick으로 화려하게 뭔가를하는 것을 고려하고있었습니다 ... 좋은 아이디어 같아요. 팁 고마워! – renosis

JavaScript 및 SVG : onClick 이벤트의 클릭 가능 영역을 어떻게 늘립니까?

답변

관련 문제