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

私はJavaScriptでどのように行うのか分からないが、私はCSSでそれを行うことができました。編集：私は知っているが、CSSはきれいに見えます。ここで

JSfiddle

私のコードです：

<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; 
    }

出典

2016-07-15 17:23:23

SVGのホバーストローク幅でのイージーインとイージーアウトの追加

答えて

関連する問題