Xlink锚SVG的活动

Question

我的SVG有4个锚点xlink ，我想获取每个对象的active事件，如何在JS中调用它？

看起来像这样：

 $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'], menu: '#timeline', scrollingSpeed: 1000, onLeave: function(index, nextIndex, direction){ $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1))); } }); }); 

 html { image-rendering: optimizeQuality; -webkit-font-smoothing: antialiased; -ms-interpolation-mode: nearest-neighbor } body { height:100%; margin:0; padding:0; overflow:hidden; font-family: 'source_sans_prolight'; } div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } ul, a { list-style:none; text-decoration:none; } .intro{ font-size:20px; } /********** menu ************/ #header { position: fixed; right: -60px; top: 0; width: 60px; height: 100%; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-property: -webkit-transform, right; -webkit-backface-visibility: hidden; z-index:120; } #menu-burger-wrapper { position: absolute; left:-66px; top: 0; -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) } /********** essai************/ #menu-burger-wrappr.is-opened { -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transform: translateX(-276px); -moz-transform:translateX(-276px); -ms-transform: translateX(-276px); -o-transform:translateX(-276px); transform:translateX(-276px); } #menu-burger-wrappr.is-closed { -webkit-transform: translateX(0px); -moz-transform:translateX(0px); -ms-transform: translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); } /**********essai************/ #menu-burger-wrapper.is-opened .line-burger { top: -35px; } #menu-burger-wrapper.is-opened .line-1 { -webkit-transform: translate(7px, 9px) rotate(45deg); -moz-transform: translate(7px, 9px) rotate(45deg); -ms-transform: translate(7px, 9px) rotate(45deg); -o-transform: translate(7px, 9px) rotate(45deg); transform: translate(7px, 9px) rotate(45deg) } #menu-burger-wrapper.is-opened .line-2 { width: 0px; -webkit-transform: translateX(22px); -moz-transform: translateX(22px); -ms-transform: translateX(22px); -o-transform: translateX(22px); transform: translateX(22px) } #menu-burger-wrapper.is-opened .line-3 { -webkit-transform: translate(7px, -9px) rotate(-45deg); -moz-transform: translate(7px, -9px) rotate(-45deg); -ms-transform: translate(7px, -9px) rotate(-45deg); -o-transform: translate(7px, -9px) rotate(-45deg); transform: translate(7px, -9px) rotate(-45deg) } .line-burger { position: relative; left: 0; top: 0; width: 1px; height: 35px; margin: 0 auto 10px auto; background-color: #c8c8c8; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) } #menu-burger { width: 44px; background:#2C75FF; height: 32px; padding-top: 12px; cursor: pointer; } #menu-burger.is-opened{ z-index:999; } #menu-burger .line { width: 30px; height: 2px; margin-bottom: 7px; background-color: #fff; -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transform: translateX(7px); -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) } #menu-burger:hover .line-1 { width: 20px; -webkit-transform: translateX(12px); -moz-transform: translateX(12px); -ms-transform: translateX(12px); -o-transform: translateX(12px); transform: translateX(12px) } #menu-burger:hover .line-2 { width: 10px; -webkit-transform: translateX(27px); -moz-transform: translateX(27px); -ms-transform: translateX(27px); -o-transform: translateX(27px); transform: translateX(27px) } #menu-burger:hover .line-3 { width: 15px; -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transform: translateX(7px) } .is-opened #menu-burger:hover .line-1 { width: 20px; -webkit-transform: translate(12px, 9px) rotate(45deg); -moz-transform: translate(12px, 9px) rotate(45deg); -ms-transform: translate(12px, 9px) rotate(45deg); -o-transform: translate(12px, 9px) rotate(45deg); transform: translate(12px, 9px) rotate(45deg); } .is-opened #menu-burger:hover .line-2 { width: 0px; -webkit-transform: translateX(22px); -moz-transform: translateX(22px); -ms-transform: translateX(22px); -o-transform: translateX(22px); transform: translateX(22px) } .is-opened #menu-burger:hover .line-3 { width: 20px; -webkit-transform: translate(12px, -9px) rotate(-45deg); -moz-transform: translate(12px, -9px) rotate(-45deg); -ms-transform: translate(12px, -9px) rotate(-45deg); -o-transform: translate(12px, -9px) rotate(-45deg); transform: translate(12px, -9px) rotate(-45deg); } .menu-base{ background:#2C75FF; position: fixed; width: 300px; height: 100%; top: 0; z-index:110; right: -300px; } .menu-base-open { right: 0px; } /**********push (class sur le body)************/ .push { overflow-x: hidden; position: relative; left: 0; } .push-toright { left: 240px; } .push-toleft { left: -240px; } .menu-base, .push { -webkit-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1); } /**********push (class sur le body)************/ .menu-item{ position:absolute; margin-top:200px; width:100%; height:100%; text-align: center; font-size:100%; overflow:hidden; } .menu-item a { color: rgba(255,255,255,0.5); text-transform: uppercase; -webkit-transition:color 0.4s ease-in; } .menu-item a:hover, #en-cours{ color: rgba(255,255,255,1); } .menu-item li { position:relative; width:100%; margin-bottom:30px; margin-left:0px; vertical-align:middle; overflow:hidden; } /********** timeline ************/ #timeline{ position:fixed; width:500px; height:500px; top:50%; left:50%; margin-top:-250px; margin-left:-250px; pointer-events: all; z-index:99; } #titre{ position:fixed; width:300px; height:100px; margin-top:-80px; margin-left:-150px; top:50%; left:50%; color:#FFF; text-align:center; } h3 { text-transform:uppercase; font-size:50px; } #greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{ stroke:rgba(204,204,204,1); } #bluecircle{ stroke-dasharray:1510; stroke-dashoffset:1510; -webkit-transition:all 1s ease; transition:all 1s ease; } #smallblueleft, #smallbluebottom, #smallblueright{ stroke-dasharray:40; stroke-dashoffset:40; -webkit-transition:all 1s ease; transition:all 1s ease; } #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{ stroke-dashoffset:0; } /********** section ************/ .fp-section { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fp-section.fp-table, .fp-slide.fp-table { display: table; table-layout:fixed; width: 100%; } .fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .fp-scrollable { overflow: scroll; } .fp-notransition { -webkit-transition: none !important; transition: none !important; } h2{ font-size: 2em; } #don{ background-image: url(../image/1.jpg); background-size:cover; } #tri{ } /********** footer ************/ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script> <!---------- timeline -----------> <div id="timeline"> <svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500"> <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/> <circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/> <circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/> <circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/> <circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/> <circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/> <a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a> <a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a> <a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a> <a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a> </svg> </div> <div id="fullpage"> <div class="section " id="don"> <h2></h2> <p></p> </div> <div class="section" id="tri"> <h2>fullPage.js</h2> <p>Create Beautiful Fullscreen Scrolling Websites</p> </div> <div class="section" id="emploi"> <h2>Example</h2> <p>HTML markup example to define 4 sections.</p> </div> <div class="section" id="recycle"> <h2>Working On Tablets</h2> <p>Designed to fit to different screen</p> </div> <div class="section" id="vente"> <h2>Working On Tablets</h2> <p>Designed to fit to different screen</p> </div> </div> 

Answer 1

最后，我引入了（几乎）无处不在的jQuery库，以使其能够在浏览器中使用（在IE上添加和删除类确实是违反直觉的）。 基本思想是声明一个函数，该函数将检查用户是否已滚动浏览给定Xlink的关注部分的顶部，然后在用户每次滚动时在每个链接上调用该函数。 在代码中，这可能类似于：

var svg = $("#svg");
var main = $("#main");
var links = $("a");
var numLinks = links.length;

function setXlinkActive(xlink, scrollY) {
  var section = $(xlink.attr("xlink:href"));
  var clientY = section.offset().top;
  if (scrollY > clientY) {
     xlink.show().addClass("active");
  } else {
     xlink.removeClass("active").hide();
  }
}

现在，需要在main元素内的每个scroll事件上为每个Xlink调用此函数：

main.bind("scroll", function() {
    var scrollY = main.scrollTop() + main.offset().top;
    links.each(function(idx, link) {
        setXlinkActive($(link), scrollY);
    });
});

弄乱我的小提琴 ，看看什么对你有用 。