SVG 호버 스트로크 너비에서 쉬움과 용이함 추가하기

svg 맵에서 쉽게 여유 공간을 추가하고 싶습니다. 나는 경로의 스트로크 너비로 호버를 만들고 있습니다. 이것이 가능합니까? 여유를 가지고 svg지도에 그런 호버를 만들 것을 제안하는 다른 모든 것을 환영합니다. 고맙습니다!SVG 호버 스트로크 너비에서 쉬움과 용이함 추가하기

Link to Codepen

<!DOCTYPE html> 
<html> 
<head xmlns="http://www.w3.org/1999/xlink"> 
<meta charset="UTF-8"> 
<title>SVG Hover</title> 
</head> 
<body> 
<svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200 200"> 
<g id="layer1" transform="translate(-277.14 -332.36)"> 
    <rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/> 
    <circle id="path4138" cx="380" cy="430" r="15" 
     onmouseover="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 50; this.style['stroke-opacity'] = 0.7;" 
     onmouseout="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 0;"/> 
</g> 
</body> 
</html>

출처

2016-07-15 RuDee

나는 자바 스크립트와 함께 할 방법을 알고하지 않습니다하지만 난 CSS와 함께 할 수 있었다. 편집 : CSS는 깨끗하게 보입니다.

<body> 
    <svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200 200"> 
    <g id="layer1" transform="translate(-277.14 -332.36)"> 
    <rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/> 
    <circle id="path4138" cx="380" cy="430" r="15" 
     /> 
    </g>

그리고 CSS :

#path4138 { 
    transition: stroke-width 0.3s ease-in; 
    stroke: #3f27dd; 
    stroke-width: 0; 
    stroke-opacity: 0.7; 
    fill: pink; 
    pointer-events:all; 
    } 

    #path4138:hover { 
    stroke-width: 50; 
    fill: red; 
    transition: stroke-width 0.3s ease-out; 
    }

JSfiddle

내 코드입니다

출처

2016-07-15 17:23:23

SVG 호버 스트로크 너비에서 쉬움과 용이함 추가하기

답변

관련 문제