Hinzufügen von Ease-In und Leichtigkeit in SVG Hover Strichbreite

Ich möchte Easy-In-Out über Hover Efect in Svg-Map hinzufügen. Ich erstelle den Hover nach Strichstärke des Pfades. Ist das überhaupt möglich? Alle anderen Vorschläge für die Erstellung solcher Schweber in Svg-Maps mit Lockerung sind willkommen. Vielen Dank!Hinzufügen von Ease-In und Leichtigkeit in SVG Hover Strichbreite

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>

Quelle

2016-07-15 RuDee

Ich weiß nicht, wie es mit JavaScript zu tun, aber ich konnte es mit CSS tun. EDIT: Ich weiß, aber CSS sieht sauberer aus.

JSfiddle

Hier ist mein Code:

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

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

Quelle

2016-07-15 17:23:23

Hinzufügen von Ease-In und Leichtigkeit in SVG Hover Strichbreite

Antwort

Verwandte Themen