基于SVG图实现的交互式人类脚底按摩穴位图

Foot Massage Guide，本例可用来学习和制作基于SVG矢量图的交互界面。鼠标悬停在SVG图形的局部区域，显示相应的信息。适用于医疗诊所/中医按摩类网站介绍页面。

h5, svg, foot

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(".pituitary").mouseover(function() {
        $("g.pituitary").css('fill', '#333');
        $('g.pituitary').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.pituitary',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".lung-chest").mouseover(function() {
        $("g.lung-chest").css('fill', '#333');
        $('g.lung-chest').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.lung-chest',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".armpit").mouseover(function() {
        $("g.armpit").css('fill', '#333');
        $('g.armpit').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.armpit',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".head-brain").mouseover(function() {
        $("g.head-brain").css('fill', '#333');
        $('g.head-brain').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.head-brain',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".teeth-sinuses").mouseover(function() {
        $("g.teeth-sinuses").css('fill', '#333');
        $('g.teeth-sinuses').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.teeth-sinuses',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".eye").mouseover(function() {
        $("g.eye").css('fill', '#333');
        $('g.eye').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.eye',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".trapezius").mouseover(function() {
        $("g.trapezius").css('fill', '#333');
        $('g.trapezius').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.trapezius',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".heart").mouseover(function() {
        $("g.heart").css('fill', '#333');
        $('g.heart').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.heart',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".arm").mouseover(function() {
        $("g.arm").css('fill', '#333');
        $('g.arm').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.arm',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".shoulder").mouseover(function() {
        $("g.shoulder").css('fill', '#333');
        $('g.shoulder').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.shoulder',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".liver").mouseover(function() {
        $("g.liver").css('fill', '#333');
        $('g.liver').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.liver',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".spleen").mouseover(function() {
        $("g.spleen").css('fill', '#333');
        $('g.spleen').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.spleen',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".kidney").mouseover(function() {
        $("g.kidney").css('fill', '#333');
        $('g.kidney').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.kidney',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".elbow").mouseover(function() {
        $("g.elbow").css('fill', '#333');
        $('g.elbow').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.elbow',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".leg").mouseover(function() {
        $("g.leg").css('fill', '#333');
        $('g.leg').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.leg',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".ear").mouseover(function() {
        $("g.ear").css('fill', '#333');
        $('g.ear').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.ear',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".descending-colon").mouseover(function() {
        $("g.descending-colon").css('fill', '#333');
        $('g.descending-colon').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.descending-colon',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".small-intestine").mouseover(function() {
        $("g.small-intestine").css('fill', '#333');
        $('g.small-intestine').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.small-intestine',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".sciatic-nerve").mouseover(function() {
        $("g.sciatic-nerve").css('fill', '#333');
        $('g.sciatic-nerve').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.sciatic-nerve',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".throat").mouseover(function() {
        $("g.throat").css('fill', '#333');
        $('g.throat').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.throat',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".nose").mouseover(function() {
        $("g.nose").css('fill', '#333');
        $('g.nose').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.nose',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".neck").mouseover(function() {
        $("g.neck").css('fill', '#333');
        $('g.neck').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.neck',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".cervical-spine").mouseover(function() {
        $("g.cervical-spine").css('fill', '#333');
        $('g.cervical-spine').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.cervical-spine',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".thyroid").mouseover(function() {
        $("g.thyroid").css('fill', '#333');
        $('g.thyroid').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.thyroid',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".esophagus").mouseover(function() {
        $("g.esophagus").css('fill', '#333');
        $('g.esophagus').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.esophagus',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".solar-plexus").mouseover(function() {
        $("g.solar-plexus").css('fill', '#333');
        $('g.solar-plexus').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.solar-plexus',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".diaphragm").mouseover(function() {
        $("g.diaphragm").css('fill', '#333');
        $('g.diaphragm').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.diaphragm',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".stomach").mouseover(function() {
        $("g.stomach").css('fill', '#333');
        $('g.stomach').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.stomach',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".adrenals").mouseover(function() {
        $("g.adrenals").css('fill', '#333');
        $('g.adrenals').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.adrenals',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".pancreas").mouseover(function() {
        $("g.pancreas").css('fill', '#333');
        $('g.pancreas').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.pancreas',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".duodenum").mouseover(function() {
        $("g.duodenum").css('fill', '#333');
        $('g.duodenum').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.duodenum',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".ureter").mouseover(function() {
        $("g.ureter").css('fill', '#333');
        $('g.ureter').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.ureter',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".bladder").mouseover(function() {
        $("g.bladder").css('fill', '#333');
        $('g.bladder').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.bladder',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".rectum").mouseover(function() {
        $("g.rectum").css('fill', '#333');
        $('g.rectum').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.rectum',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".sacrum").mouseover(function() {
        $("g.sacrum").css('fill', '#333');
        $('g.sacrum').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.sacrum',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".lower-back").mouseover(function() {
        $("g.lower-back").css('fill', '#333');
        $('g.lower-back').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.lower-back',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".gall-bladder").mouseover(function() {
        $("g.gall-bladder").css('fill', '#333');
        $('g.gall-bladder').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.gall-bladder',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".ascending-colon").mouseover(function() {
        $("g.ascending-colon").css('fill', '#333');
        $('g.ascending-colon').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.ascending-colon',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

$(".appendix").mouseover(function() {
        $("g.appendix").css('fill', '#333');
        $('g.appendix').attr({
            stroke: "#333333"
        });
        $(this).css('cursor', 'pointer');
        var svg = new Walkway({
            selector: '.appendix',
            duration: '300'
        });
        svg.draw();
    })
    .mouseout(function() {
        $("g.text-group").css('fill', '#ccc');
        if (!$(this).data('clicked')) {
            $(".text-group").attr({
                stroke: "none"
            });
        }
    });

编译

CSS

body {
    background: #f5f5f5;
    -webkit-user-select: none;
}
.content-container {
    text-align: center;
    margin-top: 80px;
}
.source {
    text-align: left !important;
    color: gray;
    position: fixed;
    margin: 0 auto;
}
.feet {
    width: 70%;
}
.left-foot {
    margin-right: 5%;
    height: auto !important;
    cursor: pointer;
}
.right-foot {
    display: inline-block;
    height: auto !important;
    cursor: pointer;
}
.info {
    display: inline-block;
    border: 1px solid;
    height: 400px;
    width: 400px;
    margin-right: 5%;
    margin-bottom: 2%;
    background: #fff;
    box-shadow: inset 0 0 10px #000000;
}
.source {
    font-size: 9px;
    bottom: 0;
    position: absolute;
}
.liver {
    fill: #f8be16;
    cursor: pointer;
}
.liver:hover {
    fill: #f9cc48;
}
.spleen {
    fill: #f19503;
    cursor: pointer;
}
.spleen:hover {
    fill: #fcab2b;
}
.small-intestine {
    fill: #c67d3e;
    cursor: pointer;
}
.small-intestine:hover {
    fill: #d29865;
}
.stomach {
    fill: #a3c518;
    cursor: pointer;
    border: 3px solid;
}
.stomach:hover {
    fill: #c1e52b;
}
.adrenals {
    fill: #cf7847;
    cursor: pointer;
}
.adrenals:hover {
    fill: #da966f;
}
.diaphragm {
    fill: #b8f6ff;
    cursor: pointer;
}
.diaphragm:hover {
    fill: #ebfcff;
}
.elbow {
    fill: #6e88bf;
    cursor: pointer;
}
.elbow:hover {
    fill: #91a5cf;
}
.knee {
    fill: #516e95;
    cursor: pointer;
}
.knee:hover {
    fill: #6b88ae;
}
.lung-chest {
    fill: #4ac0f0;
    cursor: pointer;
}
.lung-chest:hover {
    fill: #79d0f4;
}
.shoulder {
    fill: #a3b9e2;
    cursor: pointer;
}
.shoulder:hover {
    fill: #cad7ee;
}
.solar-plexus {
    fill: #fceeb9;
    cursor: pointer;
}
.solar-plexus:hover {
    fill: #fefaea;
}
.trapezius {
    fill: #dd7411;
    cursor: pointer;
}
.trapezius:hover {
    fill: #ef8e32;
}
.ear {
    fill: #717bc3;
    cursor: pointer;
}
.ear:hover {
    fill: #959cd2;
}
.ascending-colon {
    fill: #9b6132;
    cursor: pointer;
}
.ascending-colon:hover {
    fill: #c1793f;
}
.descending-colon {
    fill: #9b6132;
    cursor: pointer;
}
.descending-colon:hover {
    fill: #c1793f;
}
.eye {
    fill: #a68dbe;
    cursor: pointer;
}
.eye:hover {
    fill: #bfadd1;
}
.esophagus {
    fill: #44b38f;
    cursor: pointer;
}
.esophagus:hover {
    fill: #65c5a6;
}
.thyroid {
    fill: #22a5dd;
    cursor: pointer;
}
.thyroid:hover {
    fill: #4eb7e4;
}
.nose {
    fill: #b35228;
    cursor: pointer;
}
.nose:hover {
    fill: #d3693b;
}
.trapezius {
    fill: #dd7411;
    cursor: pointer;
}
.trapezius:hover {
    fill: #ef8e32;
}
.neck {
    fill: #eea147;
    cursor: pointer;
}
.neck:hover {
    fill: #f2b976;
}
.throat {
    fill: #e08f2c;
    cursor: pointer;
}
.throat:hover {
    fill: #e7a758;
}
.teeth-sinuses {
    fill: #d080b1;
    cursor: pointer;
}
.teeth-sinuses:hover {
    fill: #dea5c8;
}
.head-brain {
    fill: #e7afcc;
    cursor: pointer;
}
.head-brain:hover {
    fill: #f3d6e5;
}
.pituitary {
    fill: #f5cbdf;
    cursor: pointer;
}
.pituitary:hover {
    fill: #fdf6f9;
}
.arm {
    fill: #5680b2;
    cursor: pointer;
}
.arm:hover {
    fill: #799ac2;
}
.armpit {
    fill: #3d6596;
    cursor: pointer;
}
.armpit:hover {
    fill: #4f7eb7;
}
.lower-back {
    fill: #f0ad9e;
    cursor: pointer;
}
.lower-back:hover {
    fill: #f7d2ca;
}
.sciatic-nerve {
    fill: #ec9486;
    cursor: pointer;
}
.sciatic-nerve:hover {
    fill: #f3bbb2;
}
.appendix {
    fill: #71471b;
    cursor: pointer;
}
.appendix:hover {
    fill: #9a6125;
}
.rectum {
    fill: #71471b;
    cursor: pointer;
}
.rectum:hover {
    fill: #9a6125;
}
.bladder {
    fill: #f6f245;
    cursor: pointer;
}
.bladder:hover {
    fill: #f8f576;
}
.pancreas {
    fill: #8ba832;
    cursor: pointer;
}
.pancreas:hover {
    fill: #a8c845;
}
.duodenum {
    fill: #739a24;
    cursor: pointer;
}
.duodenum:hover {
    fill: #92c32e;
}
.cervical-spine {
    fill: #576996;
    cursor: pointer;
}
.cervical-spine:hover {
    fill: #7283ae;
}
.ureter {
    fill: #f6f245;
    cursor: pointer;
}
.ureter:hover {
    fill: #f8f576;
}
.kidney {
    fill: #f9ec41;
    cursor: pointer;
}
.kidney:hover {
    fill: #fbf172;
}
.heart {
    fill: #ed7876;
    cursor: pointer;
}
.heart:hover {
    fill: #f3a4a3;
}
.gall-bladder {
    fill: #c5ca15;
    cursor: pointer;
}
.gall-bladder:hover {
    fill: #e3e929;
}
.leg {
    fill: #516e95;
    cursor: pointer;
}
.leg:hover {
    fill: #6b88ae;
}
.cls-3,
.cls-40,
.cls-44 {
    fill: none;
    stroke-miterlimit: 10;
}
.red {
    stroke: #ff0025;
}
.cls-40 {
    stroke: #333;
}
.cls-43 {
    font-size: 12px;
    font-family: Gotham-Black, Gotham;
    cursor: default;
}
.cls-43 {
    stroke: none !important;
}
g.text-group {
    fill: #ccc;
}
path {
    stroke: #333;
}
.text-fill {
    fill: #333;
}

HTML

<div class="content-container">
    <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 670.95 321.09" class="feet">
        <title>Foot-Reflexology-Chart-2</title>
        <g id="Feet">
            <g>
                <path class="liver" d="M143.71,155s8,27.34,8.24,30c6.38.19,43.38,0,43.38,0s1.49-58.68,2.86-61.93-15.62,7.13-24.12,7.13H142.19Z" transform="translate(-5.55 -0.06)" />
                <path class="gall-bladder" d="M171.19,158.63a7.46,7.46,0,0,0-4.68,9.45l.06.18c1.13,2.25,4.88,5.63,9.13,3.75,3.63-1.6,4.54-6.5,3-9.5S173.08,157.88,171.19,158.63Z" transform="translate(-5.55 -0.06)" />
                <path class="red" d="M159.9,267.68" transform="translate(-5.55 -0.06)" />
                <path class="small-intestine" d="M226.85,207.63s3.9,44.48,5.65,48.56-26.41,9.76-34.75,10.13A112,112,0,0,1,179,265s2.85-58.21,2.63-61.46C200.32,206.13,204.74,206.55,226.85,207.63Z" transform="translate(-5.55 -0.06)" />
                <path class="stomach" d="M198.19,123.13s-4.68,28.63-3.78,36.25,1.83,25.75,1.83,25.75,29.43,2.75,30.56,1.63.26-23.62,2.88-31.12,10.5-23.25,10.5-23.25-19.25-.37-25.5-3.87S202.32,122.5,198.19,123.13Z" transform="translate(-5.55 -0.06)" />
                <path class="adrenals" d="M205.07,152.88c5.91,2.55,6.88,8.75,5.88,11s-9.21,3.78-12.67,1.62-7-8.62-5.08-11.12S198.69,150.13,205.07,152.88Z" transform="translate(-5.55 -0.06)" />
                <path class="diaphragm" d="M157.49,124.73s11.57,1.85,18.07,0,14.83-7.19,23.75-6.52,17.42,5.85,25.09,7.34a139.37,139.37,0,0,0,18.17,1.82l-2.37,5s-12.31.24-21.13-2.3-13.07-6.87-20.87-7-11.43,6.22-20.53,6.67-18.79.45-18.79.45Z" transform="translate(-5.55 -0.06)"
                />
                <path class="elbow" d="M152,185.06h12.28S162,202,162.57,203.19s-7.75.35-7.75.35S154.17,189.41,152,185.06Z" transform="translate(-5.55 -0.06)" />
                <path class="leg text-group" d="M157.54,258.14l14.53,5.47s-6.93-15.43-5.82-30.56a77.49,77.49,0,0,0-4-30.52l-7.44,1S158.09,244.38,157.54,258.14Z" transform="translate(-5.55 -0.06)" />
                <path class="lung-chest text-group" id="lung-chest" d="M149.23,90.38s23.5-5.5,26.83-9.17,32.33,3.17,36.83,1,22-7.83,22-7.83l9.45,1.22s4.34,27.41,2.28,37a95.3,95.3,0,0,1-5.11,15s-7.73,1.42-18.43-2.25-18.75-7.77-24.83-7.12-16.13,5.44-24.17,6.92a49.24,49.24,0,0,1-16.61-.34Z"
                transform="translate(-5.55 -0.06)" />
                <path class="shoulder" d="M145.63,153.82s15.44,2.86,15.27-8.14-3.49-22.72-5-27.56-2.38-28.53-2.38-28.53l-9.8.75a46.66,46.66,0,0,0-1.54,10.38C141.56,111.25,147.13,152.58,145.63,153.82Z" transform="translate(-5.55 -0.06)" />
                <path class="solar-plexus" d="M199.31,107.21c7.25,0,6.77,5.5,6.77,8.17s-2,5.67-6.77,5.67-6.56-4.17-6.56-6.92S194.39,107.21,199.31,107.21Z" transform="translate(-5.55 -0.06)" />
                <path class="trapezius" d="M176.33,66.83s1.36,14.42.36,15.42,14,3.43,20.63,3.15,16.92-1.72,16.92-1.72-2.54-17.27-2.17-20.39-12,5.75-18.37,5.25S176.33,66.83,176.33,66.83Z" transform="translate(-5.55 -0.06)" />
                <path class="ear" d="M138.63,75,141,92.13S155,90.35,160.18,88s16.06-3.93,16.82-6-.53-15.5-.53-15.5-1.22,1.15-1.56-2-.61-9.38-.61-9.38-6,4.19-10.33,4.5-10.37-3.33-10.37-3.33,4.56,15.27,5.82,19.69c.74,2.6.42,4.51-1.08,4.64s-2.17-5.17-2.42-6.79c-5.19,1.25-5.14,2-8.83,2.23A33.59,33.59,0,0,1,138.63,75Z"
                transform="translate(-5.55 -0.06)" />
                <path class="ascending-colon" d="M166.12,182.19c-4,3.06-5.92,7.81-3.55,22.56s4.13,18.13,3.75,27-2.81,34.29,10.91,32.89,12.84-7.52,9.59-26.52-3.68-31.75-3.25-33c4.63,1.25,41.25,3.92,43.29,2.5s-.78-21.25-.78-21.25S170.16,179.13,166.12,182.19Z" transform="translate(-5.55 -0.06)"
                />
                <path class="eye" d="M176.44,66.5c.39-.17,2.2-.54,1.75-3.92s-.66-7.46-1.55-10.83-2.43-11.42-2.43-11.42,4.29,3.23,8.85,2.23a69.33,69.33,0,0,0,11.15-4.06s-.71,7.68-.52,10,.2,5.7,1.54,6,1.83-.91,2.08-5.79-1.59-16.57-1.59-16.57,6.47,3.2,10.22,3.07,11.38-2.46,11.38-2.46L215.25,46s-1.7,8.55-1,11.17a24.51,24.51,0,0,0,1.8,4.73s-15.5,6-21.46,6.87c-4.29.6-9.13.5-16.75-.5C176.7,68.14,176,66.68,176.44,66.5Z"
                transform="translate(-5.55 -0.06)" />
                <path class="eye" d="M218.88,28.85s-1.23,5.86,1.52,9.11,13.5,8.17,16.5,8.17a25.49,25.49,0,0,0,4.92-.42v9s-5.08,3.33-9.75,2-6-4.5-6-4.5-7.33-2.68-8.09-10.5C217.57,37.45,218.88,28.85,218.88,28.85Z" transform="translate(-5.55 -0.06)" />
                <path class="esophagus" d="M243.32,123.68s-22.58-12.79-26.92-29.46c-2.48-9.53-4.57-21-4.46-28.68.09-5.78,2.5-12.89,2.16-9.29a8,8,0,0,0,2.37,6.1S221,87.68,230,98c4.82,5.48,16.31,16.13,16.31,16.13Z" transform="translate(-5.55 -0.06)" />
                <path class="thyroid" d="M247.18,105.91s.14-2.41,0-5.56a41,41,0,0,0-.47-5S235,92.21,230.07,83s-10.34-22.76-12.35-21.88c-.4.17-1.44,0-1.46.57A59.22,59.22,0,0,0,217.33,71c.58,2.31,6.89,17.33,11.51,22.5S247.18,105.91,247.18,105.91Z" transform="translate(-5.55 -0.06)"
                />
                <path class="nose" d="M241.82,45.68v8.25s9.7,4.32,10.58,4.84c4.08-6.6,10.9-17.67,10.3-20.31-3.21,2.47-8.94,5.65-12.22,6.54A32.13,32.13,0,0,1,241.82,45.68Z" transform="translate(-5.55 -0.06)" />
                <path class="trapezius" d="M235.48,56.13V57l-.8,18s-5.46,2.66-7.83,2.13c-2.32-3.59-7-12.76-7-12.76s6.71,1,7.3-3.36,1-6.25,1-6.25S230.62,56.75,235.48,56.13Z" transform="translate(-5.55 -0.06)" />
                <path class="neck" d="M240,53.29c1.84-.56,11.32-1,12.41,5.51-3.52,5.46-6.87,9.81-8,17.09a53.58,53.58,0,0,1-9.74-.93l.83-18.83A10.69,10.69,0,0,1,240,53.29Z" transform="translate(-5.55 -0.06)" />
                <path class="throat" d="M218,61s1.58,4.06,4.63,4c5.28-.14,6.81-8.5,6.06-12s-5.25-8.32-6.5-9-3.71-1.18-4.33-.4C218.61,46.6,218.78,59.86,218,61Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M219.85,22.38s7.63,16.36,19.38,16.11,23.51-3.24,23.48-6.2a11,11,0,0,1,0,6.2s-10,11-24.37,8.45-16.52-7.38-17.92-9C218,35.16,217.89,32.38,219.85,22.38Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M238.73,39.79c13.43,1.41,22.46-3.85,24-5.39s-.18-6.39-1.08-9S253.17.24,236.34,3s-16.46,23.29-16.46,23.29S226.82,38.54,238.73,39.79Z" transform="translate(-5.55 -0.06)" />
                <path class="pituitary" d="M241.59,19.38c-5.08.89-4.69,5.75-4.6,7.67s4.12,4.83,6.56,4.67,6.77-2.67,5.27-6.83S244.44,18.88,241.59,19.38Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M195.73,32.12s4.15,3.51,11.78,3.32,9.82-2.71,9.82-2.71l1.56-11s-7,4.26-11.14,3.8-13.16-8.94-13.16-8.94Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M205.73,26.91c6.7.84,12.28-2.17,13-4.53C220,18.57,222,.09,206.72.75S195,18.46,195,18.46A13.09,13.09,0,0,0,205.73,26.91Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M174.61,40.8s4.55,2.68,9.3,2.34,9.67-2.43,10.25-5.42a49.54,49.54,0,0,0,.73-6s-5.81,5.24-10.73,4.91-10.54-4-10.54-4Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M183.57,37.44c5.5.13,11.14-3.4,11-6.19s-1.08-16.38-12.08-15.46-9.22,16.89-9.22,16.89S175.48,37.26,183.57,37.44Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M153.88,56.68a13.55,13.55,0,0,0,10.19,3.48,16.21,16.21,0,0,0,10.2-5l.3-8.5s-5.67,6.75-9.67,7.13-11.64-2.94-11.58-4.69C153.32,51.79,153.88,56.68,153.88,56.68Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M147.18,76.33c3.56-.08,8.36-1.36,8.68-2.32s-.5-8.42-.5-8.42-2.42,5.67-8,4.5a46.09,46.09,0,0,1-10.18-3.54L138.59,75A31.33,31.33,0,0,0,147.18,76.33Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M146,71.18c3.7.25,8.41-2.57,9.27-5.37-.06-3.64-2.35-10-5-11.8s-6-1.25-8.5.33-4,4.91-4.33,7.71S135.88,70.49,146,71.18Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M163.15,54.09c4.34,0,10.94-4.31,11.12-6.67S172.57,33.5,162.9,34s-9.42,12-9.29,15.17S159.65,54.09,163.15,54.09Z" transform="translate(-5.55 -0.06)" />
                <path class="arm" d="M143.89,155.9c3.9-3,4.68-11.77,1.68-22.52s-2.75-35.5-2.75-36.37c-6.69-1.23-6.52,1.87-6.52,1.87s-3.44,15.63.68,30.63c1.11,4,1.72,8.13,2.58,11.5C141.91,150.17,143.89,155.9,143.89,155.9Z" transform="translate(-5.55 -0.06)" />
                <path class="armpit" id="armpit" d="M139.74,85.41s9.82-.2,7.66,6.3-9.65,7.48-10.57,5.16C138,93.34,139.74,85.41,139.74,85.41Z" transform="translate(-5.55 -0.06)" />
                <path class="lower-back" d="M158.09,266.68s1.42,24.67,9.67,34.42,15.87,19.56,35,19.56c20.56,0,34.31-16.43,35.81-29.18,1.23-10.47-2.62-24.19-3.37-27.06-7.5,3.88-22.38,9.88-35.88,10S158.09,266.68,158.09,266.68Z" transform="translate(-5.55 -0.06)" />
                <path class="sciatic-nerve" d="M158.06,257.42v9.23s26.64,9.34,41.73,8.17,35.21-8.83,35.62-9.5-2.29-12.1-2.29-12.1-19.65,12.17-36.37,12.42S166.72,262.68,158.06,257.42Z" transform="translate(-5.55 -0.06)" />
                <path class="appendix" d="M178.82,246.25c-5.87,0-6.5,4.63-6.5,6.63a6.5,6.5,0,0,0,6.5,6c4.5,0,6-3.87,6-6.31S182.69,246.25,178.82,246.25Z" transform="translate(-5.55 -0.06)" />
                <path class="ureter" d="M196.63,196.57s4.15,16.75,9.48,23.56S225.75,241,225.75,241l2.46-3.54S212,224.5,208.38,217.07s-8.31-21.31-8.31-21.31Z" transform="translate(-5.55 -0.06)" />
                <path class="pancreas" d="M205.19,169.85a31.53,31.53,0,0,0,11.34,3.34,61.5,61.5,0,0,0,11.06-.64l-.67,7.58a58.69,58.69,0,0,1-11.7.12c-5-.57-11.58-3.44-11.58-3.44Z" transform="translate(-5.55 -0.06)" />
                <path class="duodenum" d="M203.65,176.81A44.23,44.23,0,0,0,216.06,180a57.59,57.59,0,0,0,10.94-.69l-.78,8.13a60.6,60.6,0,0,1-11.73.09c-5-.57-12-3.71-12-3.71Z" transform="translate(-5.55 -0.06)" />
                <path class="cervical-spine" d="M238.21,294.83s-10.68-59.58-11.4-82.28-1.75-45.35,4.07-61.06c7.07-19.1,14.81-27.81,15.85-42.94,1-14.14-5-32.5-1-39.5S263.2,43.76,262.9,36.38s2.15,4.08-2.39,15.25c-3.16,7.77-5.09,11.56-6.47,15.48-.82,2.32-2,4.4-2.06,7.95-.08,18.49,6,34.2,3.76,41.41-.56,1.8-.83,4.09-1.52,6.14-2.06,6.15-5.25,13.2-10.35,23-6.81,13.09-8.84,20.29-9.12,40.11s-.92,41.52,1.37,53.65S245,280.94,238.21,294.83Z"
                transform="translate(-5.55 -0.06)" />
                <path class="bladder" d="M231.61,235.92c-3.81,0-6.91,2.74-6.23,10,.52,5.63,3.11,8.73,7.53,8.25,2.3-.25,5.53-3.23,3.91-9.17S236.5,235.92,231.61,235.92Z" transform="translate(-5.55 -0.06)" />
                <path class="kidney" d="M200.57,159c6.14,1.21,6.5,7.87,4.25,16.12s-2,10.88-1,16.5-4.31,6.5-9.4,6-15-3.83-15-17.5S186.07,156.14,200.57,159Z" transform="translate(-5.55 -0.06)" />
                <path class="cls-40" d="M218.32,29.38S221.07,1.3,238.74,2.63C257.48,4,264.41,29,263.66,39.46S252.83,67.8,252.08,74.13c-.83,7,1.32,21.11,1.88,23.88s4.09,15.67.5,24.75c-5.87,14.88-16.37,31.63-18.37,44.63s-2.37,57.63.38,73.38,8.13,38.25,3.25,50.5-13.25,29.38-37.5,29.38S165.85,298,165.85,298s-8.12-13-8.5-46.62-2.75-57.75-6.87-72.5-13.76-41.42-15.25-60.62c-1.7-21.88,5.25-26.37,4.5-33.5S137,68.17,137.11,63.17s3.63-10,8-10.5,8.39,1.19,10.25,11.06c1.19,6.31.73,9.94.94,12.31.29,3.35,1.06,4.88,2.06,4.63s2.25-1,.5-6.87-5.37-15.62-5.5-21.75.33-17.29,7.85-18.14c6.77-.77,13,3.39,13.4,12.77s-1.17,19.8,1.88,19.88c1.63,0,2.63-5.37-1.12-19.87s-3-31.5,7.5-31.38,11.88,12.5,11.75,16-1.58,24,1,23.25c3.7-1.13.63-17.37-1-31.62S197.62.57,206.25.56c10,0,14.51,8.42,13.8,16.3s-9.25,44.42-3.55,44.7C220.82,61.68,215.69,45.75,218.32,29.38Z"
                transform="translate(-5.55 -0.06)" />
            </g>
            <g>
                <path class="liver" d="M538.84,155s-8,27.34-8.24,30c-6.37.19-43.38,0-43.38,0s-1.49-58.68-2.86-61.93,15.63,7.13,24.13,7.13h31.88Z" transform="translate(-5.55 -0.06)" />
                <path class="spleen" d="M523.23,158.63c6,2.37,6.65,9.8,5.94,11.22-1.12,2.25-8.52,8.73-13.75,6.41-7.35-3.27-1-9.5.5-12.5S521.33,157.88,523.23,158.63Z" transform="translate(-5.55 -0.06)" />
                <path class="red" d="M522.65,267.68" transform="translate(-5.55 -0.06)" />
                <path class="small-intestine" d="M455.7,207.63s-3.9,44.48-5.65,48.56,26.41,9.76,34.75,10.13A112,112,0,0,0,503.58,265s-2.85-58.21-2.62-61.46C482.23,206.13,477.81,206.55,455.7,207.63Z" transform="translate(-5.55 -0.06)" />
                <path class="stomach" d="M484.36,123.13s4.68,28.63,3.78,36.25-1.83,25.75-1.83,25.75-29.43,2.75-30.56,1.63-.26-23.62-2.88-31.12-10.5-23.25-10.5-23.25,19.25-.37,25.5-3.87S480.23,122.5,484.36,123.13Z" transform="translate(-5.55 -0.06)" />
                <path class="adrenals" d="M477.48,152.88c-5.91,2.55-6.87,8.75-5.87,11s9.21,3.78,12.67,1.62,7-8.62,5.08-11.12S483.86,150.13,477.48,152.88Z" transform="translate(-5.55 -0.06)" />
                <path class="diaphragm" d="M525.06,124.73s-11.57,1.85-18.07,0-14.83-7.19-23.75-6.52-17.42,5.85-25.09,7.34A139.37,139.37,0,0,1,440,127.37l2.38,5s12.31.24,21.13-2.3,13.07-6.87,20.87-7,11.43,6.22,20.53,6.67,18.79.45,18.79.45Z" transform="translate(-5.55 -0.06)"
                />
                <path class="elbow" d="M530.58,185.06H518.32S520.53,202,520,203.19s7.75.35,7.75.35S528.38,189.41,530.58,185.06Z" transform="translate(-5.55 -0.06)" />
                <path class="leg" d="M525,258.14l-14.53,5.47s6.93-15.43,5.82-30.56a77.49,77.49,0,0,1,4-30.52l7.44,1S524.46,244.38,525,258.14Z" transform="translate(-5.55 -0.06)" />
                <path class="lung-chest" d="M533.32,90.38s-23.5-5.5-26.83-9.17-32.33,3.17-36.83,1-22-7.83-22-7.83l-9.45,1.22s-4.34,27.41-2.28,37a95.3,95.3,0,0,0,5.11,15s7.73,1.42,18.43-2.25,18.75-7.77,24.83-7.12,16.13,5.44,24.17,6.92a49.24,49.24,0,0,0,16.61-.34Z" transform="translate(-5.55 -0.06)"
                />
                <path class="shoulder" d="M536.92,153.82s-15.44,2.86-15.27-8.14,3.49-22.72,5-27.56S529,89.59,529,89.59l9.8.75a46.66,46.66,0,0,1,1.54,10.38C541,111.25,535.42,152.58,536.92,153.82Z" transform="translate(-5.55 -0.06)" />
                <path class="solar-plexus" d="M483.24,107.21c-7.25,0-6.77,5.5-6.77,8.17s2,5.67,6.77,5.67,6.56-4.17,6.56-6.92S488.16,107.21,483.24,107.21Z" transform="translate(-5.55 -0.06)" />
                <path class="trapezius" d="M506.22,66.83s-1.36,14.42-.36,15.42-14,3.43-20.62,3.15-16.93-1.72-16.93-1.72,2.54-17.27,2.17-20.39,12,5.75,18.38,5.25S506.22,66.83,506.22,66.83Z" transform="translate(-5.55 -0.06)" />
                <path class="ear" d="M543.92,75l-2.34,17.13S527.52,90.35,522.37,88s-16.06-3.93-16.82-6,.53-15.5.53-15.5,1.22,1.15,1.56-2,.61-9.38.61-9.38,6,4.19,10.33,4.5S529,56.34,529,56.34,524.39,71.61,523.13,76c-.74,2.6-.42,4.51,1.08,4.64s2.17-5.17,2.42-6.79c5.19,1.25,5.14,2,8.83,2.23A33.59,33.59,0,0,0,543.92,75Z"
                transform="translate(-5.55 -0.06)" />
                <path class="descending-colon" d="M516.43,182.19c4,3.06,7,7.94,4.59,22.69s-3.1,18-2.71,26.83c.91,20.81,4.33,30.17-13,32.93-25,4-47.68-5.46-54.78-10.39-1.9-1.32-.25-5.33,2.66-9.17,8.83,2,39.9,10.59,40.83,5.12,3.25-19,5.37-43.83,4.94-45.08-4.62,1.25-41.25,3.92-43.29,2.5s.78-21.25.78-21.25S512.39,179.13,516.43,182.19Z"
                transform="translate(-5.55 -0.06)" />
                <path class="eye" d="M506.11,66.5c-.39-.17-2.2-.54-1.75-3.92s.66-7.46,1.55-10.83,2.43-11.42,2.43-11.42-4.29,3.23-8.85,2.23a69.33,69.33,0,0,1-11.15-4.06s.71,7.68.52,10-.2,5.7-1.54,6-1.83-.91-2.08-5.79,1.59-16.57,1.59-16.57-6.47,3.2-10.22,3.07-11.38-2.46-11.38-2.46L467.3,46s1.7,8.55,1,11.17a24.51,24.51,0,0,1-1.8,4.73s15.5,6,21.46,6.87c4.29.6,9.13.5,16.75-.5C505.85,68.14,506.5,66.68,506.11,66.5Z"
                transform="translate(-5.55 -0.06)" />
                <path class="eye" d="M463.67,28.85s1.23,5.86-1.52,9.11-13.5,8.17-16.5,8.17a25.49,25.49,0,0,1-4.92-.42v9s5.08,3.33,9.75,2,6-4.5,6-4.5,7.33-2.68,8.09-10.5C465,37.45,463.67,28.85,463.67,28.85Z" transform="translate(-5.55 -0.06)" />
                <path class="esophagus" d="M439.23,123.68s22.58-12.79,26.92-29.46c2.48-9.53,4.57-21,4.46-28.68-.09-5.78-2.5-12.89-2.16-9.29a8,8,0,0,1-2.37,6.1S461.58,87.68,452.53,98c-4.82,5.48-16.31,16.13-16.31,16.13Z" transform="translate(-5.55 -0.06)" />
                <path class="thyroid" d="M435.37,105.91s-.14-2.41,0-5.56a41,41,0,0,1,.47-5S447.57,92.19,452.49,83s10.34-22.76,12.35-21.88c.4.17,1.44,0,1.46.57a59.22,59.22,0,0,1-1.07,9.23c-.58,2.31-6.89,17.33-11.51,22.5S435.37,105.91,435.37,105.91Z" transform="translate(-5.55 -0.06)"
                />
                <path class="nose" d="M440.73,45.68v8.25s-9.7,4.32-10.58,4.84c-4.08-6.6-10.9-17.67-10.3-20.31,3.21,2.47,8.94,5.65,12.22,6.54A32.13,32.13,0,0,0,440.73,45.68Z" transform="translate(-5.55 -0.06)" />
                <path class="trapezius" d="M447.07,56.13V57l.8,18s5.46,2.66,7.83,2.13c2.32-3.59,7-12.76,7-12.76s-6.71,1-7.3-3.36-1-6.25-1-6.25S451.93,56.75,447.07,56.13Z" transform="translate(-5.55 -0.06)" />
                <path class="neck" d="M442.58,53.29c-1.84-.56-11.32-1-12.41,5.51,3.52,5.46,6.87,9.81,8,17.09a53.58,53.58,0,0,0,9.74-.93l-.83-18.83A10.69,10.69,0,0,0,442.58,53.29Z" transform="translate(-5.55 -0.06)" />
                <path class="throat" d="M464.58,61S463,65,460,65c-5.28-.14-6.81-8.5-6.06-12s5.25-8.32,6.5-9,3.71-1.18,4.33-.4C463.94,46.6,463.77,59.86,464.58,61Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M462.7,22.38s-7.63,16.36-19.38,16.11-23.51-3.24-23.48-6.2a11,11,0,0,0,0,6.2s10,11,24.37,8.45,16.52-7.38,17.92-9C464.58,35.16,464.66,32.38,462.7,22.38Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M443.82,39.79c-13.43,1.41-22.46-3.85-24-5.39s.18-6.39,1.08-9S429.38.24,446.21,3s16.46,23.29,16.46,23.29S455.73,38.54,443.82,39.79Z" transform="translate(-5.55 -0.06)" />
                <path class="pituitary" d="M441,19.38c5.08.89,4.69,5.75,4.6,7.67s-4.12,4.83-6.56,4.67-6.77-2.67-5.27-6.83S438.11,18.88,441,19.38Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M486.82,32.12s-4.15,3.51-11.78,3.32-9.82-2.71-9.82-2.71l-1.56-11s7,4.26,11.14,3.8S488,16.59,488,16.59Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M476.82,26.91c-6.7.84-12.28-2.17-13-4.53C462.52,18.57,460.55.09,475.83.75s11.75,17.71,11.75,17.71A13.09,13.09,0,0,1,476.82,26.91Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M507.94,40.8s-4.55,2.68-9.3,2.34-9.67-2.46-10.25-5.46a49.54,49.54,0,0,1-.73-6s5.81,5.24,10.73,4.91,10.54-4,10.54-4Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M499,37.44c-5.5.13-11.14-3.4-11-6.19s1.08-16.38,12.08-15.46,9.22,16.89,9.22,16.89S507.07,37.26,499,37.44Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M528.67,56.68a13.55,13.55,0,0,1-10.19,3.48,16.21,16.21,0,0,1-10.2-5l-.3-8.5s5.67,6.75,9.67,7.13,11.64-2.94,11.58-4.69C529.23,51.79,528.67,56.68,528.67,56.68Z" transform="translate(-5.55 -0.06)" />
                <path class="teeth-sinuses" d="M535.37,76.33C531.81,76.25,527,75,526.69,74s.5-8.42.5-8.42,2.42,5.67,8,4.5a46.09,46.09,0,0,0,10.18-3.54L544,75A31.33,31.33,0,0,1,535.37,76.33Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M536.58,71.18c-3.7.25-8.41-2.57-9.27-5.37.06-3.64,2.35-10,5-11.8s6-1.25,8.5.33,4,4.91,4.33,7.71S546.67,70.49,536.58,71.18Z" transform="translate(-5.55 -0.06)" />
                <path class="head-brain" d="M519.4,54.09c-4.34,0-10.94-4.31-11.12-6.67S510,33.5,519.65,34s9.42,12,9.29,15.17S522.9,54.09,519.4,54.09Z" transform="translate(-5.55 -0.06)" />
                <path class="arm" d="M538.66,155.9c-3.9-3-4.68-11.77-1.68-22.52s2.75-35.5,2.75-36.37c6.69-1.23,6.52,1.87,6.52,1.87s3.44,15.63-.68,30.63c-1.11,4-1.72,8.13-2.58,11.5C540.64,150.17,538.66,155.9,538.66,155.9Z" transform="translate(-5.55 -0.06)" />
                <path class="armpit" d="M542.81,85.41s-9.82-.2-7.66,6.3,9.65,7.48,10.57,5.16C544.58,93.34,542.81,85.41,542.81,85.41Z" transform="translate(-5.55 -0.06)" />
                <path class="lower-back" d="M524.46,266.68s-1.42,24.67-9.67,34.42-15.87,19.56-35,19.56c-20.56,0-34.31-16.43-35.81-29.18-1.23-10.47,2.63-24.19,3.38-27.06,7.5,3.88,22.38,9.88,35.88,10S524.46,266.68,524.46,266.68Z" transform="translate(-5.55 -0.06)" />
                <path class="sciatic-nerve" d="M524.49,257.42v9.23s-26.64,9.34-41.73,8.17-35.21-8.83-35.62-9.5,2.29-12.1,2.29-12.1,19.65,12.17,36.37,12.42S515.83,262.68,524.49,257.42Z" transform="translate(-5.55 -0.06)" />
                <path class="rectum" d="M457,246.25c5.88,0,6.5,4.63,6.5,6.63s-1.75,4.57-6.25,4.57S451,255,451,252.57,453.14,246.25,457,246.25Z" transform="translate(-5.55 -0.06)" />
                <path class="ureter" d="M485.92,196.57s-4.15,16.75-9.48,23.56S456.8,241,456.8,241l-2.46-3.54s16.21-12.94,19.83-20.38,8.31-21.31,8.31-21.31Z" transform="translate(-5.55 -0.06)" />
                <path class="pancreas" d="M477.36,169.85A31.53,31.53,0,0,1,466,173.19a61.5,61.5,0,0,1-11.06-.64l.67,7.58a58.69,58.69,0,0,0,11.7.12c5-.57,11.58-3.44,11.58-3.44Z" transform="translate(-5.55 -0.06)" />
                <path class="duodenum" d="M478.9,176.81A44.23,44.23,0,0,1,466.49,180a57.59,57.59,0,0,1-10.94-.69l.78,8.13a60.6,60.6,0,0,0,11.73.09c5-.57,12-3.71,12-3.71Z" transform="translate(-5.55 -0.06)" />
                <path class="cervical-spine" d="M444.34,294.83s10.68-59.58,11.4-82.28,1.75-45.35-4.07-61.06c-7.09-19.11-14.81-27.81-15.85-42.95-1-14.14,5-32.5,1-39.5s-17.47-25.29-17.17-32.67S417.5,40.45,422,51.62c3.16,7.77,5.09,11.56,6.47,15.48.82,2.32,2,4.4,2.06,7.95.08,18.49-6,34.2-3.76,41.41.56,1.8.83,4.09,1.52,6.14,2.06,6.15,5.25,13.2,10.35,23,6.81,13.09,8.84,20.29,9.12,40.11s.92,41.52-1.37,53.65S437.53,280.94,444.34,294.83Z"
                transform="translate(-5.55 -0.06)" />
                <path class="bladder" d="M450.94,235.92c3.81,0,6.91,2.74,6.23,10-.52,5.63-3.11,8.73-7.53,8.25-2.3-.25-5.53-3.23-3.91-9.17S446.05,235.92,450.94,235.92Z" transform="translate(-5.55 -0.06)" />
                <path class="kidney" d="M482,159c-6.14,1.21-6.5,7.87-4.25,16.12s2,10.88,1,16.5,4.31,6.5,9.4,6,15-3.83,15-17.5S496.48,156.14,482,159Z" transform="translate(-5.55 -0.06)" />
                <path class="cls-40" d="M464.23,29.38S461.48,1.3,443.81,2.63C425.07,4,418.14,29,418.89,39.46s10.83,28.34,11.58,34.67c.83,7-1.32,21.11-1.87,23.88s-4.09,15.67-.5,24.75c5.88,14.88,16.38,31.63,18.38,44.63s2.38,57.63-.37,73.38S438,279,442.86,291.27s13.25,29.38,37.5,29.38S516.74,298,516.74,298s8.13-13,8.5-46.62,2.75-57.75,6.88-72.5,13.76-41.42,15.25-60.62c1.7-21.88-5.25-26.37-4.5-33.5s2.75-16.62,2.63-21.62-3.62-10-8-10.5-8.39,1.19-10.25,11.06c-1.19,6.31-.73,9.94-.94,12.31-.29,3.35-1.06,4.88-2.06,4.63s-2.25-1-.5-6.87,5.38-15.62,5.5-21.75-.33-17.29-7.85-18.14c-6.77-.77-13,3.39-13.4,12.77s1.17,19.8-1.87,19.88c-1.62,0-2.62-5.37,1.13-19.87s3-31.5-7.5-31.38-11.87,12.5-11.75,16,1.58,24-1,23.25c-3.7-1.13-.62-17.37,1-31.62S485,.57,476.39.56c-10,0-14.51,8.42-13.8,16.3s9.25,44.42,3.55,44.7C461.73,61.68,466.86,45.75,464.23,29.38Z"
                transform="translate(-5.55 -0.06)" />
                <path class="heart" d="M510.13,94.49c-11.51-.14-25.75,7.55-24.25,15.78s2.25,13,15.5,15.72,26.75,4.82,29.75-6.09S530.88,94.74,510.13,94.49Z" transform="translate(-5.55 -0.06)" />
            </g>
        </g>
        <g class="text-group heart" id="heart">
            <text class="cls-43 heart-text" transform="translate(598.58 134.34)">Heart</text>
            <polyline class="cls-44" points="504.93 113.42 559.14 129.94 595.24 129.94" />
        </g>
        <g class="text-group head-brain" id="head-brain">
            <text class="cls-43 head-brain-text" transform="translate(16.84 39.46)">Head/Brain</text>
            <text class="cls-43" transform="translate(580.4 40.46)">Head/Brain</text>
            <polyline class="cls-44" points="493.14 25.96 559.14 35.39 575.99 35.39" />
            <polyline class="cls-44" points="177.04 25.96 111.04 35.39 94.19 35.39" />
        </g>
        <g class="text-group teeth-sinuses" id="teeth-sinuses">
            <text class="cls-43 teeth-sinuses-text" transform="translate(8 54.02)">Teeth/Sinuses</text>
            <text class="cls-43 teeth-sinuses-text" transform="translate(571.57 55.02)">Teeth/Sinuses</text>
            <polyline class="cls-44" points="492.75 39.97 559.14 50.6 568.49 50.6" />
            <polyline class="cls-44" points="177.43 39.97 111.04 50.6 101.69 50.6" />
        </g>
        <g class="text-group eye" id="eye">
            <text class="cls-43 eye-text" transform="translate(40.56 67.46)">Eye</text>
            <text class="cls-43 eye-text" transform="translate(604.13 68.46)">Eye</text>
            <polyline class="cls-44" points="487.87 58.71 559.14 64.56 600.49 64.56" />
            <polyline class="cls-44" points="182.31 58.71 111.04 64.56 69.69 64.56" />
        </g>
        <g class="text-group ear" id="ear">
            <text class="cls-43 ear-text" transform="translate(41.79 80.43)">Ear</text>
            <text class="cls-43 ear-text" transform="translate(605.36 81.43)">Ear</text>
            <polyline class="cls-44" points="509.87 71.14 559.14 77.27 600.49 77.27" />
            <polyline class="cls-44" points="160.31 71.14 111.04 77.27 66.06 77.27" />
        </g>
        <g class="text-group trapezius" id="trapezius">
            <text class="cls-43 trapezius-text" transform="translate(22.07 93.38)">Trapezius</text>
            <text class="cls-43 trapezius-text" transform="translate(585.64 94.38)">Trapezius</text>
            <polyline class="cls-44" points="481.72 77.11 559.14 91.65 583.62 91.65" />
            <polyline class="cls-44" points="188.46 77.11 111.04 91.65 86.56 91.65" />
        </g>
        <g class="text-group armpit" id="armpit">
            <text class="cls-43 armpit-text" transform="translate(30.35 106.38)">Armpit</text>
            <text class="cls-43 armpit-text" transform="translate(593.92 107.38)">Armpit</text>
            <polyline class="cls-44" points="533.72 92.07 559.14 103.94 591.49 103.94" />
            <polyline class="cls-44" points="136.46 92.07 111.04 103.94 78.69 103.94" />
        </g>
        <g class="text-group lung-chest" id="lung-chest">
            <text class="cls-43 lung-chest-text" transform="translate(15.89 119.56)">Lung/Chest</text>
            <text class="cls-43 lung-chest-text" transform="translate(579.46 120.56)">Lung/Chest</text>
            <polyline class="cls-44" points="475.04 97.95 559.14 115.69 576.24 115.69" />
            <polyline class="cls-44" points="167.61 103.76 111.04 115.69 93.94 115.69" />
        </g>
        <g class="text-group arm" id="arm">
            <text class="cls-43 arm-text" transform="translate(38.79 133.34)">Arm</text>
            <text class="cls-43 arm-text" transform="translate(602.36 146.73)">Arm</text>
            <polyline class="cls-44" points="534.87 134.34 559.14 142.44 597.62 142.44" />
            <polyline class="cls-44" points="134.79 122.97 111.04 129.94 69.69 129.94" />
        </g>
        <g class="text-group shoulder" id="shoulder">
            <text class="cls-43 shoulder-text" transform="translate(24.44 145.58)">Shoulder</text>
            <text class="cls-43 shoulder-text" transform="translate(588.01 158.97)">Shoulder</text>
            <polyline class="cls-44" points="522.19 139.44 559.14 155.09 584.87 155.09" />
            <polyline class="cls-44" points="145.96 131.59 111.04 142.44 84.87 142.44" />
        </g>
        <g class="text-group liver" id="liver">
            <text class="cls-43 liver-text" transform="translate(36.5 157.92)">Liver</text>
            <text class="cls-43 liver-text" transform="translate(600.06 171.3)">Liver</text>
            <polyline class="cls-44" points="494.62 148.77 559.14 167.48 597.62 167.48" />
            <polyline class="cls-44" points="172.14 145.58 111.04 155.09 72.56 155.09" />
        </g>
        <g class="text-group gall-bladder" id="gall-bladder">
            <text class="cls-43 gall-bladder-text" transform="translate(14.47 170.92)">Gall Bladder</text>
            <polyline class="cls-44" points="168.66 166.48 111.04 167.48 91.62 167.48" />
        </g>
        <g class="text-group spleen" id="spleen">
            <text class="cls-43 spleen-text" transform="translate(594.68 184.3)">Spleen</text>
            <polyline class="cls-44" points="513.56 169.79 559.14 180.43 591.49 180.43" />
        </g>
        <g class="text-group kidney" id="kidney">
            <text class="cls-43 kidney-text" transform="translate(30.52 183.33)">Kidney</text>
            <text class="cls-43 kidney-text" transform="translate(594.09 196.72)">Kidney</text>
            <polyline class="cls-44" points="482.11 180.43 559.14 192.69 590.62 192.69" />
            <polyline class="cls-44" points="187.1 176.69 111.04 180.43 76.37 180.43" />
        </g>
        <g class="text-group elbow" id="elbow">
            <text class="cls-43 elbow-text" transform="translate(32.99 197.28)">Elbow</text>
            <text class="cls-43 elbow-text" transform="translate(596.56 210.67)">Elbow</text>
            <polyline class="cls-44" points="519.51 191.44 559.14 206.94 594.12 206.94" />
            <polyline class="cls-44" points="151.94 192.69 111.04 192.69 77.62 192.69" />
        </g>
        <g class="text-group leg" id="leg">
            <text class="cls-43 leg-text" transform="translate(40.57 209.73)">Leg</text>
            <text class="cls-43 leg-text" transform="translate(604.13 223.12)">Leg</text>
            <polyline class="cls-44" points="517.1 219.19 559.14 220.19 601.12 220.19" />
            <polyline class="cls-44" points="154.35 210.66 111.04 206.94 68.87 206.94" />
        </g>
        <g class="text-group ascending-colon" id="ascending-colon">
            <text class="cls-43 ascending-colon-text" transform="translate(0 223.19)">Ascending Colon</text>
            <polyline class="cls-44" points="169.02 216.44 111.04 220.19 106.12 220.19" />
        </g>
        <g class="text-group descending-colon" id="descending-colon">
            <text class="cls-43 descending-colon-text" transform="translate(560.11 236.58)">Descending Colon</text>
            <line class="cls-44" x1="499.76" y1="223.46" x2="559.14" y2="233.01" />
        </g>
        <g class="text-group appendix" id="appendix">
            <text class="cls-43 appendix-text" transform="translate(22.24 250.5)">Appendix</text>
            <polyline class="cls-44" points="173.02 253.16 111.04 247.04 87.37 247.04" />
        </g>
        <g class="text-group small-intestine" id="small-intestine">
            <text class="cls-43 small-intestine-text" transform="translate(6.45 237.19)">Small Intestine</text>
            <text class="cls-43 small-intestine-text" transform="translate(570.02 250.58)">Small Intestine</text>
            <polyline class="cls-44" points="477.58 230.66 559.14 247.04 568.87 247.04" />
            <polyline class="cls-44" points="193.86 228.23 111.04 233.01 101.69 233.01" />
        </g>
        <g class="text-group sciatic-nerve" id="sciatic-nerve">
            <text class="cls-43 sciatic-nerve-text" transform="translate(11.47 263.35)">Sciatic Nerve</text>
            <text class="cls-43 sciatic-nerve-text" transform="translate(575.03 264.36)">Sciatic Nerve</text>
            <polyline class="cls-44" points="498.03 266.27 559.14 259.94 572.74 259.94" />
            <polyline class="cls-44" points="172.14 266.27 111.04 259.94 97.44 259.94" />
        </g>
        <g class="text-group lower-back" id="lower-back">
            <text class="cls-43 lower-back-text" transform="translate(299.82 269.84)">Lower Back</text>
            <polyline class="cls-44" points="474.51 286.27 385.03 265.54 373.87 265.54" />
            <polyline class="cls-44" points="197.04 286.27 286.52 265.54 297.69 265.54" />
        </g>
        <g class="text-group cervical-spine" id="cervical-spine">
            <text class="cls-43 cervical-spine-text" transform="translate(312.29 256.51)">Sacrum</text>
            <polyline class="cls-44" points="439.75 264.36 385.03 253.16 361.49 253.16" />
            <polyline class="cls-44" points="231.81 264.36 286.52 253.16 310.07 253.16" />
        </g>
        <g class="text-group rectum" id="rectum">
            <text class="cls-43 rectum-text" transform="translate(311.83 243.51)">Rectum</text>
            <polyline class="cls-44" points="454.03 253.16 385.03 240.93 362.37 240.93" />
        </g>
        <g class="text-group bladder" id="bladder">
            <text class="cls-43 bladder-text" transform="translate(311.4 230.65)">Bladder</text>
            <polyline class="cls-44" points="445.73 243.51 385.03 227.5 363.12 227.5" />
            <polyline class="cls-44" points="225.83 243.51 286.52 227.5 308.44 227.5" />
        </g>
        <g class="text-group ureter" id="ureter">
            <text class="cls-43 ureter-text" transform="translate(315.7 217.35)">Ureter</text>
            <polyline class="cls-44" points="473.36 212.27 385.03 214.06 359.99 214.06" />
            <polyline class="cls-44" points="198.19 212.27 286.52 214.06 311.57 214.06" />
        </g>
        <g class="text-group cervical-spine" id="cervical-spine">
            <text class="cls-43 cervical-spine-text" transform="translate(292.98 203.35)">Lumbar Spine</text>
            <polyline class="cls-44" points="447.87 203.48 385.03 199.94 380.37 199.94" />
            <polyline class="cls-44" points="223.69 203.48 286.52 199.94 291.19 199.94" />
        </g>
        <g class="text-group duodenum" id="duodenum">
            <text class="cls-43 duodenum-text" transform="translate(301.95 189.89)">Duodenum</text>
            <polyline class="cls-44" points="465.07 183.33 385.03 186.27 371.53 186.27" />
            <polyline class="cls-44" points="206.49 183.33 286.52 186.27 300.02 186.27" />
        </g>
        <g class="text-group pancreas" id="pancreas">
            <text class="cls-43 pancreas-text" transform="translate(307.68 177.44)">Pancreas</text>
            <polyline class="cls-44" points="462.76 176.69 385.03 175.11 366.49 175.11" />
            <polyline class="cls-44" points="208.79 176.69 286.52 175.11 305.07 175.11" />
        </g>
        <g class="text-group adrenals" id="adrenals">
            <text class="cls-43 adrenals-text" transform="translate(308.09 164.49)">Adrenals</text>
            <polyline class="cls-44" points="473.36 156.61 385.03 160.54 365.24 160.54" />
            <polyline class="cls-44" points="198.19 156.61 286.52 160.54 306.32 160.54" />
        </g>
        <g class="text-group stomach" id="stomach">
            <text class="cls-43 stomach-text" transform="translate(308.34 151.77)">Stomach</text>
            <polyline class="cls-44" points="462.26 144.77 385.03 148.77 364.7 148.77" />
            <polyline class="cls-44" points="209.3 144.77 286.52 148.77 306.86 148.77" />
        </g>
        <g class="text-group diaphragm" id="diaphragm">
            <text class="cls-43 diaphragm-text" transform="translate(301.51 139.44)">Diaphragm</text>
            <polyline class="cls-44" points="460.75 126.25 385.03 136.94 371.53 136.94" />
            <polyline class="cls-44" points="210.8 126.25 286.52 136.94 300.02 136.94" />
        </g>
        <g class="text-group solar-plexus" id="solar-plexus">
            <text class="cls-43 solar-plexus-text" transform="translate(298.03 127.2)">Solar Plexus</text>
            <polyline class="cls-44" points="478.55 114.07 385.03 124.44 376.03 124.44" />
            <polyline class="cls-44" points="193 114.07 286.52 124.44 295.52 124.44" />
        </g>
        <g class="text-group esophagus" id="esophagus">
            <text class="cls-43 esophagus-text" transform="translate(301.98 113.42)">Esophagus</text>
            <polyline class="cls-44" points="449.41 103.94 385.03 109.83 371.53 109.83" />
            <polyline class="cls-44" points="222.14 103.94 286.52 109.83 300.02 109.83" />
        </g>
        <g class="text-group thyroid" id="thyroid">
            <text class="cls-43 thyroid-text" transform="translate(311.52 100.23)">Thyroid</text>
            <polyline class="cls-44" points="445.73 91.65 385.03 96.66 362.87 96.66" />
            <polyline class="cls-44" points="225.83 91.65 286.52 96.66 308.69 96.66" />
        </g>
        <g class="text-group cervical-spine" id="cervical-spine">
            <text class="cls-43 cervical-text" transform="translate(291.57 87.23)">Cervical Spine</text>
            <polyline class="cls-44" points="427.88 83.45 385.03 83.44 381.37 83.44" />
            <polyline class="cls-44" points="243.68 83.45 286.52 83.44 290.19 83.44" />
        </g>
        <g class="text-group neck" id="neck">
            <text class="cls-43 neck-text" transform="translate(320 74.28)">Neck</text>
            <polyline class="cls-44" points="435.18 64.38 385.03 71.14 355.87 71.14" />
            <polyline class="cls-44" points="236.37 64.38 286.52 71.14 315.69 71.14" />
        </g>
        <g class="text-group nose" id="nose">
            <text class="cls-43 nose-text" transform="translate(320.04 61.31)">Nose</text>
            <polyline class="cls-44" points="424.73 48.55 385.03 58.71 355.87 58.71" />
            <polyline class="cls-44" points="246.83 48.55 286.52 58.71 315.69 58.71" />
        </g>
        <g class="text-group throat" id="throat">
            <text class="cls-43 throat-text" transform="translate(314.96 47.88)">Throat</text>
            <polyline class="cls-44" points="453.67 55.22 385.03 44.61 361.87 44.61" />
            <polyline class="cls-44" points="217.89 55.22 286.52 44.61 309.69 44.61" />
        </g>
        <g class="text-group pituitary" id="pituitary">
            <g>
                <text class="cls-43 pituitary-text" transform="translate(308.87 33.31)">Pituitary</text>
                <polyline class="cls-44" points="433.97 25.45 385.2 29.77 367.87 29.77" />
                <polyline class="cls-44" points="237.59 25.45 286.36 29.77 303.69 29.77" />
            </g>
        </g>
    </svg>

</div>
<div class="source">
    <p>Source: naturallivingideas.com</p>
</div>

Foot Massage Guide，本例可用来学习和制作基于SVG矢量图的交互界面。鼠标悬停在SVG图形的局部区域，显示相应的信息。适用于医疗诊所/中医按摩类网站介绍页面。

h5, svg, foot

编辑器支持Emmet

快捷键

Foot Massage Guide，本例可用来学习和制作基于SVG矢量图的交互界面。鼠标悬停在SVG图形的局部区域，显示相应的信息。适用于医疗诊所/中医按摩类网站介绍页面。

h5, svg, foot

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

基于GSAP实现的全屏水平方向幻灯片（支持鼠标拖拉、左右方向箭、底部导航圆点、触摸滑动）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：