Question

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

某些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 CODES

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

Answer 1

我假设所有＆＃34;城市＆＃34; ID与path-number-link

类似

重新阅读问题 - 忽略＆＃34;样式＆＃34;以前的建议：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);
});

当mouseenter触发时，在<object>标记内的所选SVG中添加属性

1 个答案: