使用菜单按钮操作SVG图片（学习如何动态改变SVG图）

通过按钮点击改变SVG图片布局和内置样式（如颜色）。

gsap, menu, button

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2826
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

document.addEventListener("DOMContentLoaded", function(event) {
    window.onload = function() {

var master = document.querySelector("#master");
        var controls = document.querySelector("#controls");
        var colorArray = ["#46a4cc", "#94c356", "#eae047", "#e3aa59", "#a63ba0", "#cf5b21", "#7533b2", "#a90f45"];
        var colorSwatches = document.querySelectorAll(".colorSwatch");
        var masterData = master.getBBox();
        var mw = masterData.width;
        var mh = masterData.height;
        var textPadding = 16;
        var textSpacing = 20;
        var fontSize = 20;
        var titles = ["Home", "About Us", "Service Directory", "Photo Gallery", "Contact Us"];
        var svgns = "http://www.w3.org/2000/svg";
        var textElements = [];
        var textWidths = [];
        var starts = [];
        var middles = [];
        var original = document.querySelector("#textStuff");
        var totalWidth = 0;

TweenMax.set([master, controls], {
            xPercent: -50
        });

// color changing controls

for (var i = 0; i < colorSwatches.length; i++) {
            TweenMax.set(colorSwatches[i], {
                backgroundColor: colorArray[i]
            });
            colorSwatches[i].index = i;
            colorSwatches[i].addEventListener("click", colorChange);
        }

function colorChange() {
            TweenMax.to(".globalFill", 0.5, {
                fill: colorArray[this.index]
            });
            TweenMax.to(".globalStroke", 0.5, {
                stroke: colorArray[this.index]
            });
        }

// simple loop to create the text elements
        for (let i = 0; i < titles.length; i++) {
            var txt = document.createElementNS(svgns, "text");
            txt.setAttributeNS(null, "x", 0);
            txt.setAttributeNS(null, "y", 0);
            txt.setAttributeNS(null, "font-size", fontSize);
            txt.setAttributeNS(null, "fill", "#262626");
            txt.innerHTML = titles[i];
            original.appendChild(txt);
            textWidths.push(txt.getBBox().width);
            textElements.push(txt);
            totalWidth += textWidths[i] + textPadding * 2 + textSpacing;
        }

totalWidth -= textSpacing; // last text element doesn't need a trailing space
        var cv = (mw / 2 - totalWidth) / 2; // needed to center all the text elements
        var yStart = mh / 4 - textElements[0].getBBox().height / 2 - textPadding;
        var yEnd = textElements[0].getBBox().height + textPadding * 2;

// position the text and add a transparent rectangle over the top to act 
        // as the mouse click event target -- adds a little padding to the text
        for (let i = 0; i < titles.length; i++) {
            var start = i < 1 ? textPadding + cv : start + textWidths[i - 1] + textPadding * 2 + textSpacing;
            starts.push(start);
            middles.push(start + textWidths[i] / 2);
            TweenMax.set(textElements[i], {
                y: mh / 4 - textElements[i].getBBox().height / 2 - textElements[i].getBBox().y
            });
            TweenMax.set(textElements[i], {
                x: start
            });
            var newRect = document.createElementNS(svgns, "rect");
            newRect.setAttributeNS(null, "x", start - textPadding);
            newRect.setAttributeNS(null, "y", yStart);
            newRect.setAttributeNS(null, "width", textWidths[i] + textPadding * 2);
            newRect.setAttributeNS(null, "height", yEnd);
            newRect.setAttributeNS(null, "fill", "black");
            newRect.setAttributeNS(null, "opacity", 0);
            newRect.setAttributeNS(null, "class", "listener");
            original.appendChild(newRect);
        }

// clone the text elements and listeners group for all demos
        var groups = document.querySelectorAll(".demoGroup");
        var bg = document.querySelectorAll(".bg");
        for (let i = 1; i < groups.length; i++) {
            var newClone = original.cloneNode(true);
            groups[i].appendChild(newClone);
        }

// position demos on master SVG
        TweenMax.set("#demo2", {
            x: mw / 2
        });
        TweenMax.set("#demo3", {
            y: mh / 2
        });
        TweenMax.set("#demo4", {
            x: mw / 2,
            y: mh / 2
        });

// viewBox zoom controls
        var buttons = document.querySelectorAll("button");
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].index = i;
            buttons[i].addEventListener("click", zoomView);
        }

function zoomView() {
            TweenMax.to("#master", 1, {
                attr: {
                    viewBox: this.getAttribute('data-view')
                },
                ease: Power3.easeInOut
            });
        }

// *************************************************************************************************
        // *************************************************************************************************
        // Start Demo 1
        var stalk = 40;
        var d1Solids = [];
        var d1Polys = [];
        var d1Strokes = ["#444", "none", "#42a6e0"];
        var d1Class = ["transparent", "globalFill", "globalStroke"];
        var d1Widths = [1, 0, 6];
        var d1OldTarget = 0;
        var d1NewTarget = 0;
        var d1Targets = document.querySelectorAll("#demo1 .listener");
        var text1 = document.querySelectorAll("#demo1 text");
        var d1Anim;
        var d1Master;
        TweenMax.set("#topLine", {
            attr: {
                x1: middles[0],
                x2: middles[titles.length - 1],
                y1: yStart - stalk,
                y2: yStart - stalk
            },
            stroke: d1Strokes[0],
            strokeWidth: d1Widths[0]
        });
        TweenMax.set("#d1Target", {
            stroke: d1Strokes[2],
            strokeWidth: d1Widths[2]
        });
        for (let i = 0; i < titles.length; i++) {
            // create the stalks that stretch from the line to teh square
            var line = document.createElementNS(svgns, "line");
            line.setAttribute("x1", middles[i]);
            line.setAttribute("y1", yStart - stalk);
            line.setAttribute("x2", middles[i]);
            line.setAttribute("y2", yStart);
            line.setAttribute("stroke", d1Strokes[0]);
            line.setAttribute("stroke-width", d1Widths[0]);
            bg[0].appendChild(line);
            // add listeners
            d1Targets[i].index = i;
            d1Targets[i].addEventListener("click", demo1CoolStuff);
        }

// need 3 copies of the polyline, static outline, animating outline and solid
        for (let j = 0; j < 3; j++) {
            for (let i = 0; i < titles.length; i++) {
                // create the stalks that stretch from the line to teh square
                var px1 = starts[i] - textPadding;
                var px2 = middles[i];
                var px3 = starts[i] + textWidths[i] + textPadding;
                var py1 = yStart;
                var py2 = yStart + yEnd;
                var polyPoints = px2 + " " + py2 + "," + px1 + " " + py2 + "," + px1 + " " + py1 + "," + px3 + " " + py1 + "," + px3 + " " + py2 + "," + px2 + " " + py2;
                var polyline = document.createElementNS(svgns, "polyline");
                polyline.setAttribute("points", polyPoints);
                polyline.setAttribute("class", d1Class[j]);
                bg[0].appendChild(polyline);
                if (j === 1) {
                    d1Solids.push(polyline);
                }
                if (j === 2) {
                    d1Polys.push(polyline);
                }

TweenMax.set(polyline, {
                    stroke: d1Strokes[j],
                    strokeWidth: d1Widths[j],

});
            }
        }

TweenMax.set(d1Polys, {
            drawSVG: 0,
            opacity: 0
        });
        TweenMax.set(d1Solids, {
            scaleY: 0,
            transformOrigin: "center top"
        });
        TweenMax.set(d1Polys[0], {
            drawSVG: true,
            opacity: 1
        });
        TweenMax.set(d1Solids[0], {
            scaleY: 1
        });

d1Anim = new TimelineMax({
                    paused: true
                });
                d1Anim.set("#d1Target", {
                    opacity: 1
                });
                d1Anim.add("start");
                d1Anim.to(d1Polys[d1OldTarget], dur, {
                    drawSVG: "50% 50%"
                }, "start");
                d1Anim.to("#d1Target", dur, {
                    drawSVG: true
                }, "start");
                d1Anim.to(d1Solids[d1OldTarget], dur, {
                    scaleY: 0,
                }, "start");
                d1Anim.set(d1Polys[d1OldTarget], {
                    opacity: 0
                });
                d1Anim.add("part2");
                d1Anim.set(d1Polys[d1NewTarget], {
                    opacity: 1
                });
                d1Anim.to("#d1Target", dur, {
                    drawSVG: "100% 100%"
                }, "part2");
                d1Anim.to(d1Solids[d1NewTarget], dur, {
                    scale: 1
                }, "part2");
                d1Anim.fromTo(d1Polys[d1NewTarget], dur, {
                    drawSVG: "50% 50%"
                }, {
                    drawSVG: "0% 100%"
                }, "part2");
                d1Anim.set("#d1Target", {
                    opacity: 0
                });
                d1Master.to(d1Anim, 1, {
                    progress: 1,
                    ease: Power3.easeInOut
                });

d1OldTarget = d1NewTarget;
            }
            // End Demo 1
            // *************************************************************************************************

// *************************************************************************************************
        // Start Demo 2
        var d2Targets = document.querySelectorAll("#demo2 .listener");
        var d2OldTarget = 0;
        var d2NewTarget = 0;
        var d2Top = yStart;
        var d2Bottom = yStart + yEnd;
        var d2Target = document.querySelector("#d2Target");
        var d2Anim;
        var burstL = document.querySelector("#d2BurstLeft");
        var burstR = document.querySelector("#d2BurstRight");
        var burstLines = document.querySelectorAll("#burstLines line");
        var text2 = document.querySelectorAll("#demo2 text");

for (let i = 0; i < titles.length; i++) {
            d2Targets[i].index = i;
            d2Targets[i].addEventListener("click", demo2CoolStuff);
        }
        TweenMax.set("#d2BottomLine", {
            attr: {
                x1: starts[0] - textPadding,
                x2: starts[0] + totalWidth - textPadding,
                y1: d2Bottom,
                y2: d2Bottom
            },
            strokeWidth: 6,
        });

TweenMax.set(d2Target, {
            attr: {
                x: starts[0] - textPadding,
                width: textWidths[0] + textPadding * 2,
                y: d2Top,
                height: yEnd
            },
            strokeWidth: 4,
            stroke: "none",
        });

TweenMax.set("#shadow", {
            attr: {
                x1: starts[0] - textPadding,
                x2: textWidths[0] + starts[0] + textPadding,
                y1: yStart + yEnd,
                y2: yStart + yEnd
            }
        });

TweenMax.set([burstL, burstR], {
            y: yStart - 35,
            drawSVG: 0,
            opacity: 0
        });

TweenMax.set(text2[0], {
            fill: "#fff"
        });

function demo2CoolStuff() {
            d2NewTarget = this.index;
            if (d2OldTarget === d2NewTarget) {
                return;
            }
            if (d2Anim && d2Anim.isActive()) {
                d2Anim.progress(1);
            }

var dur = 1;
            var burstDur = 0.24;
            var burstAnim = new TimelineMax();

TweenMax.set(burstL, {
                x: starts[d2NewTarget] - 35 - textPadding,
                drawSVG: 0,
                opacity: 0
            });
            TweenMax.set(burstR, {
                x: starts[d2NewTarget] + textWidths[d2NewTarget] + textPadding + 5,
                drawSVG: 0,
                opacity: 0
            });

burstAnim.set([burstL, burstR], {
                opacity: 1,
                immediateRender: false
            });
            burstAnim.fromTo(burstLines, burstDur / 3, {
                drawSVG: "0% 0%"
            }, {
                drawSVG: "0% 30%",
                ease: Linear.easeNone
            });
            burstAnim.to(burstLines, burstDur / 2, {
                drawSVG: "70% 100%",
                ease: Linear.easeNone
            });
            burstAnim.to(burstLines, burstDur / 3, {
                drawSVG: "100% 100%",
                ease: Power3.easeOut
            });

d2Anim = new TimelineMax();
            d2Anim.to(d2Target, 0.35, {
                attr: {
                    height: 0,
                    y: d2Bottom
                },
                ease: Back.easeIn.config(2)
            });
            d2Anim.to(text2[d2OldTarget], 0.35, {
                fill: "#000"
            }, 0.15);
            d2Anim.set(d2Target, {
                attr: {
                    x: starts[d2NewTarget] - textPadding,
                    width: textWidths[d2NewTarget] + textPadding * 2
                }
            });
            d2Anim.add("part2");
            d2Anim.set("#shadow", {
                attr: {
                    x1: starts[d2NewTarget] - textPadding,
                    x2: textWidths[d2NewTarget] + starts[d2NewTarget] + textPadding,
                }
            });
            d2Anim.add(burstAnim, "part2+=0.15");
            d2Anim.to(d2Target, 0.35, {
                attr: {
                    height: yEnd,
                    y: yStart
                },
                ease: Back.easeOut.config(1.5)
            }, "part2");
            d2Anim.to(text2[d2NewTarget], 0.35, {
                fill: "#fff"
            }, "part2");

d2OldTarget = d2NewTarget;
        }

// End Demo 2
        // *************************************************************************************************

// *************************************************************************************************
        // Start Demo 3

var d3Targets = document.querySelectorAll("#demo3 .listener");
        var text3 = document.querySelectorAll("#demo3 text");
        var d3Anim;
        var d3Master;
        var d3OldTarget = 0;
        var d3NewTarget = 0;
        var stretch;
        var capsule = document.querySelector("#capsule");
        for (let i = 0; i < titles.length; i++) {
            d3Targets[i].index = i;
            d3Targets[i].addEventListener("click", demo3CoolStuff);
        }

TweenMax.set("#outline", {
            attr: {
                x: starts[0] - textPadding,
                width: totalWidth,
                y: yStart,
                height: yEnd,
                rx: yEnd / 2
            },
            strokeWidth: 2,
            stroke: "#eee"
        });

TweenMax.set(capsule, {
            attr: {
                x: starts[0] - textPadding,
                width: textWidths[0] + textPadding * 2,
                y: yStart,
                height: yEnd,
                rx: yEnd / 2
            }
        });

TweenMax.set(text3[0], {
            fill: "#fff"
        });

function demo3CoolStuff() {
            d3NewTarget = this.index;
            if (d3OldTarget === d3NewTarget) {
                return;
            }
            if (d3Master && d3Master.isActive()) {
                d3Master.progress(1);
            }

d3Anim = new TimelineMax({
                paused: true
            });
            d3Master = new TimelineMax();

if (d3NewTarget > d3OldTarget) {
                // left to right stretch
                stretch = starts[d3NewTarget] + textWidths[d3NewTarget] - starts[d3OldTarget] + textPadding * 2;
                d3Anim.to(capsule, 2, {
                    attr: {
                        width: stretch
                    }
                }, "start");

d3Anim.to(capsule, 1, {
                    attr: {
                        x: starts[d3NewTarget] - textPadding,
                        width: textWidths[d3NewTarget] + textPadding * 2
                    }
                }, "end");
            } else {
                // right to left stretch
                stretch = starts[d3OldTarget] + textWidths[d3OldTarget] + textPadding * 2 - starts[d3NewTarget];
                d3Anim.to(capsule, 2, {
                    attr: {
                        width: stretch,
                        x: starts[d3NewTarget] - textPadding
                    }
                }, "start");
                d3Anim.to(capsule, 1, {
                    attr: {
                        width: textWidths[d3NewTarget] + textPadding * 2
                    }
                }, "end");

}

d3Anim.to(text3[d3OldTarget], 0.5, {
                fill: "#000"
            }, 0);
            d3Anim.to(
                capsule,
                2, {
                    scaleY: 0.5,
                    transformOrigin: "center bottom"
                },
                "start"
            );
            d3Anim.to(capsule, 1, {
                scaleY: 1
            }, "end");
            d3Anim.to(text3[d3NewTarget], 1, {
                fill: "#fff"
            }, "end");
            d3Master.to(d3Anim, 0.75, {
                progress: 1,
                ease: Power3.easeInOut
            });

d3OldTarget = d3NewTarget;

}

// End Demo 3
        // *************************************************************************

// *************************************************************************
        // Start Demo 4

var d4Targets = document.querySelectorAll("#demo4 .listener");

var d4Anim;
        var d4Master;
        var d4OldTarget = 0;
        var d4NewTarget = 0;
        var text4 = document.querySelectorAll("#demo4 text");
        var target4 = document.querySelector("#square4");
        var tRolls = ["right bottom", "right top", "left top", "left bottom"];
        var bRolls = ["left bottom", "left top", "right top", "right bottom"];
        for (let i = 0; i < titles.length; i++) {
            d4Targets[i].index = i;
            d4Targets[i].addEventListener("click", demo4CoolStuff);
        }
        TweenMax.set("#rollLine", {
            attr: {
                x1: starts[0] - textPadding,
                x2: starts[0] + totalWidth - textPadding,
                y1: d2Bottom,
                y2: d2Bottom
            },

});
        TweenMax.set(target4, {
            attr: {
                y: yStart,
                height: yEnd,
                x: starts[0] - textPadding,
                width: textWidths[0] + textPadding * 2
            }
        });
        TweenMax.set(text4[0], {
            fill: "#fff"
        });

function demo4CoolStuff() {

d4NewTarget = this.index;
                if (d4OldTarget === d4NewTarget) {
                    return;
                }
                if (d4Master && d4Master.isActive()) {
                    d4Master.progress(1);
                }

if (d4NewTarget > d4OldTarget) {
                    d4Anim.to(target4, 0.9, {
                        rotation: -45,
                        transformOrigin: "left bottom"
                    });
                } else {
                    d4Anim.to(target4, 0.9, {
                        rotation: 45,
                        transformOrigin: "right bottom"
                    });
                }
                d4Anim.to(target4, 0.25, {
                    rotation: 0
                });

for (let i = 0; i < rolls; i++) {
                    d4Anim.to(target4, 1, {
                        rotation: turnPerc,
                        transformOrigin: turnArray[i % 4]
                    });
                }

d4Anim.set(target4, {
                    clearProps: "x"
                });

if (d4NewTarget > d4OldTarget) {
                    d4Anim.set(target4, {
                        attr: {
                            x: yEnd * rolls + (middles[d4OldTarget] - yEnd / 2)
                        }
                    });
                } else {
                    d4Anim.set(target4, {
                        attr: {
                            x: middles[d4OldTarget] - yEnd * rolls - yEnd / 2
                        }
                    });
                }

d4Anim.to(target4, 1, {
                    attr: {
                        x: starts[d4NewTarget] - textPadding,
                        width: textWidths[d4NewTarget] + textPadding * 2
                    },
                    ease: Back.easeInOut.config(3)
                });

d4Master.to(text4[d4OldTarget], 0.35, {
                    fill: "#000"
                }, 0);
                d4Master.to(target4, 0.35, {
                    attr: {
                        x: middles[d4OldTarget] - yEnd / 2,
                        width: yEnd
                    },
                    ease: Back.easeInOut
                }, 0);
                d4Master.to(d4Anim, 2, {
                    progress: 1,
                    ease: Power2.easeInOut
                });
                d4Master.to(text4[d4NewTarget], 0.25, {
                    fill: "#fff"
                }, "-=0.45");

d4OldTarget = d4NewTarget;
            }
            // End Demo 4
            // ---------------------------------------------------------------

/* ---------------------------------------------------------------
        	 Correctly size/resize and position the SVG and control panel
        	---------------------------------------------------------------*/

newSize();
        window.addEventListener("resize", newSize);

TweenMax.set([controls, master], {
            opacity: 1
        });
    };
});

编译

CSS

body {
    padding: 0;
    margin: 0;
    font-family: "Roboto", sans-serif;
    background: #000;
    overflow: hidden;
    height: 100vh;
    color: white;
}
* {
    box-sizing: border-box;
}
#master,
#controls {
    position: absolute;
    left: 50%;
    overflow: hidden;
    opacity: 0;
}
text {
    user-select: none;
    font-weight: 700;
}
.listener {
    cursor: pointer;
}
#buttonWrap {
    width: 88px;
    height: 130px;
    position: absolute;
    left: 30px;
    top: 45px;
}
#colorControl {
    position: absolute;
    left: 140px;
    top: 62px;
    width: 140px;
    text-align: center;
}
button {
    font-family: "Roboto", sans-serif;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}
p {
    margin: 0;
}
.zoomWrap button {
    width: 40px;
    height: 30px;
    margin: 2px;
    float: left;
}
button.fullView {
    width: 84px;
    height: 30px;
    margin: 2px;
    float: left;
}
.colorSwatch {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 100%;
    border: solid 2px white;
    float: left;
    margin: 2px;
    cursor: pointer;
}
#controls {
    position: relative;
    width: 300px;
    height: 174px;
    text-align: center;
}
h2 {
    color: #555;
    margin-top: 16px;
    font-size: 20px;
}
.globalFill {
    fill: #46a4cc;
}
.globalStroke {
    stroke: #46a4cc;
}
.transparent {
    fill: transparent;
}
#demo1 .globalStroke {
    fill: none;
}
#demo1 .globalFill {
    opacity: 0.25;
}

HTML

<g text-anchor="middle" font-size="30" class="globalFill">
        <text transform="translate(500 40)">Jumping Lines</text>
        <text transform="translate(1500 40)">Tab Popper With Accent Burst</text>
        <text transform="translate(500 540)">Sneaky, Stretchy Capsule</text>
        <text transform="translate(1500 540)">Rolling Square</text>
    </g>
    <line x1="0" y1="500" x2="2000" y2="500" stroke-width="2" stroke="#000" />
    <line x1="1000" y1="0" x2="1000" y2="1000" stroke-width="2" stroke="#000" />
    <g id="demo1" class="demoGroup">
        <g class="bg">
            <line id="topLine" x1="0" y1="0" x2="0" y2="0" stroke-width="0" />

</g>
        <polyline id="d1Target" stroke-width="0" stroke="none" fill="none" points="" class="globalStroke"></polyline>
        <g id="textStuff">

</g>
    </g>
    <g id="demo2" class="demoGroup">
        <g class="bg"></g>

</g>
            <g id="d2BurstRight" stroke-width="4" class="globalStroke">
                <line x1="0" y1="30" x2="8" y2="0" />
                <line x1="0" y1="30" x2="22" y2="8" />
                <line x1="0" y1="30" x2="30" y2="24" />

</g>

</g>
    </g>
    <g id="demo4" class="demoGroup">
        <g class="bg">
            <line id="rollLine" x1="0" y1="0" x2="0" y2="0" stroke-width="1" stroke="#333" />
            <rect id="square4" x="0" y="0" width="0" height="0" class="globalFill" />

</g>
    </g>

</svg>
<div id="controls">
    <h2>SVG Menu Experiments</h2>
    <div>
        <div id="buttonWrap">
            <p>viewBox</p>

</div>
        <div id="colorControl">

<p>Color Theme</p>
            <div class="colorSwatch"></div>
            <div class="colorSwatch"></div>
            <div class="colorSwatch"></div>
            <div class="colorSwatch"></div>
            <div class="colorSwatch"></div>
            <div class="colorSwatch"></div>
            <div class="colorSwatch"></div>
            <div class="colorSwatch"></div>

</div>
    </div>
</div>

通过按钮点击改变SVG图片布局和内置样式（如颜色）。

gsap, menu, button

编辑器支持Emmet

快捷键

通过按钮点击改变SVG图片布局和内置样式（如颜色）。

gsap, menu, button

使用SVG图标的动效菜单按钮

使用CSS3 mask（蒙版，遮罩）属性实现超酷按钮悬停动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：