个人中心
gpt4 book ai didi

javascript - 当 mouseenter 触发时，在 标记内的选定 SVG 中添加属性
转载 作者：行者123 更新时间：2023-12-03 08:23:33 25 4
gpt4 key购买 nike

我正在处理一个包含 SVG 文件的对象元素。这是一张 map 。每个路径都有相同的默认颜色，但是当 mouseenter 触发时，我想用相同的颜色值更改它，但我不想为所有城市手动执行此操作。我怎样才能动态地做到这一点？

enter image description here

一些 SVG 代码

 <g id="haritaContainer" fill-rule="evenodd" sketch:type="MSPage" fill="none">
      <g id="harita" transform="translate(-62 -236)" sketch:type="MSLayerGroup">
       <g id="layerSinir" sketch:type="MSShapeGroup" transform="translate(522.55 367.66) rotate(-16) translate(-472 -246.5)">
        <g id="gAvrupaYakasi" transform="translate(0)">
         <g id="pathCatalca" transform="translate(367 361)">
          <g id="path-9-link" stroke="#000" fill="url(#linearGradient-2)">
           <path id="path-2" d="m3.1251 12.527l-2.534-0.451 1.0042 2.361 11.848 7.894 5.646 3.911 1.074 2.287 9.906 0.857 3.841-1.58 4.464-9.297 8.158-0.379 2.607 2.622 9.097-6.666 0.471-9.6981-0.341-3.7527-18.083 6.3636-15.123-1.1055-3.857-3.4886-2.645-0.9563-2.489 0.0734-2.05 1.8655 2.567 8.0667-4.346-2.6964-3.8735 2.0204-4.982-0.9107-0.3594 2.6597z"/>
         </g>
         <path id="path-2" d="m3.1251 12.527l-2.534-0.451 1.0042 2.361 11.848 7.894 5.646 3.911 1.074 2.287 9.906 0.857 3.841-1.58 4.464-9.297 8.158-0.379 2.607 2.622 9.097-6.666 0.471-9.6981-0.341-3.7527-18.083 6.3636-15.123-1.1055-3.857-3.4886-2.645-0.9563-2.489 0.0734-2.05 1.8655 2.567 8.0667-4.346-2.6964-3.8735 2.0204-4.982-0.9107-0.3594 2.6597z"/>
       </g>
       <g id="pathBuyukcekmece" transform="translate(220 281)">
        <g id="path-3-link" stroke="#000" fill="url(#linearGradient-3)">
         <path id="path-3" d="m42.807 88.941l-2.531-2.424-10.733-5.648-2.207-3.075-11.535-6.462-3.34-2.922-0.47-2.922-11.834-6.678 3.291-7.003 1.9851 0.218 4.0852-4.11 3.7647 6.171 2.318-0.256 1.96-6.798-1.96-1.178-0.192-2.33-1.754-3.073-0.013-0.025-0.499-5.25 2.125-10.357 1.96-0.909-2.446-3.648-0.231-8.898 1.063-1.831 2.024 2.663 1.857-0.538-1.025-1.8306 3.15-4.7241 7.223 11.113 6.557-2.855 3.33 2.112 3.342-2.214 5.43 6.926 6...............

JAVASCRIPT 代码 

var haritasvg = document.getElementById('haritasvg')

            haritasvg.addEventListener("load",function(){               
                var svgDoc = haritasvg.contentDocument

                /* İLÇE LİSTESİ ------------ */             
                var pathCatalca = svgDoc.getElementById('pathCatalca') 

                /* İLÇE FONKSİYONLARI ------ */ 

                /*çatalca mouseenter*/          
                pathCatalca.addEventListener("mouseenter",function(){                   
                    var catalcaInner = $(this).find('#path-9-link')
                    catalcaInner.attr('fill','url(#redGradient)')
                    $(this).css('cursor','pointer')
                },false);


                /*çatalca mouseleave*/  
                pathCatalca.addEventListener("mouseleave",function(){
                    var catalcaInner = $(this).find('#path-9-link')
                    catalcaInner.attr('fill','url(#linearGradient-2)')
                        },false);
                })

最佳答案

我假设所有“城市”的 ID 都类似于 path-number-link

重新阅读问题 - 忽略之前的“风格”建议:D

var haritasvg = document.getElementById('haritasvg');
haritasvg.addEventListener("load",function() {
    var svgDoc = haritasvg.contentDocument;
    var pathCatalca = svgDoc.getElementById('pathCatalca');

    var mouser = (function() {
        var saveOldFill = {};
        return function (e) {
            var fill;
            if (e.target && e.target.id && /^path-\d+-link$/.test(e.target.id)) {
                if (e.type == 'mouseenter') {
                    saveOldFill[e.target.id] = e.target.fill;
                    fill = 'url(#redGradient)';
                    e.style.cursor = 'pointer';
                }
                else {
                    fill = saveOldFill[e.target.id];
                }
                e.target.fill = fill;
            }
        }
    }());
    svgElement.addEventListener('mouseenter', mouser);
    svgElement.addEventListener('mouseleave', mouser);
});

关于javascript - 当 mouseenter 触发时，在 <object> 标记内的选定 SVG 中添加属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33649711/

25 4 0
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com