如何在javascript中选择具有类名的SVG路径

我有一个SVG，希望在悬停另一个元素时更改元素的样式。在本例中，当我将鼠标悬停在“ring_three_fill”上时，我将看到“ring_three_border”的样式发生变化。我尝试了两种方法：css和javascript。两种方法都不起作用。由于它在css中不起作用，有没有一种方法可以用javascript中的类名选择在悬停时更改的路径

<path id="ring_three_fill" class="ring-fill hide" opacity="0.5" fill="#66BCEA" d="M563.6,255.3c0.1,0,0.2,0,0.2,0c0-3.5,0.3-7.1-0.1-10.6
    c-1.3-12-5.6-22.9-13.1-32.4c-10.5-13.3-18.5-28-23.4-44.3c-1.6-5.4-3.7-10.6-6.1-15.6c-5-10.8-11.9-19.9-23.2-24.8"/>
<path id="ring_three_border" class="ring-border hide" opacity="0.5" fill="#66BCEA" d="M537.4,265.2c-0.9-12.9-5-24.5-12.5-35.1"/>

Javascript:

var fill = document.getElementsByClassName("ring_fill");
        fill.onmouseover = function() {
            document.getElementsByClassName("ring-border").attr("style", "transform: scale(1.2,1.2);")
        };

---

我想这就是你想要的。使用简单的JavaScript

var proximity = 2;
var steps = parseInt(5 / (proximity * 2), 10);

function sortPaths(list) {
    var sizes = [].map.call(list, function (path) {
        return {
            el: path,
            length: path.getTotalLength()
        };
    });
    return sizes.sort(function (a, b) {
        return a.length > b.length;
    }).map(function (path) {
        return path.el;
    });
}

function reset(from, to, arr) {
    for (var i = from; i < to; i++) {
        arr[i].setAttribute("style", "transform: scale(1,1);");
    }
}

function attach(rings, i) {
    var start = proximity * -1;
    return function () {
        for (var j = start; j < proximity; j++) {
            var el = rings[i + j];
            if (!el) continue;
            var step = (j == 0 ? 13 : 10 + (j / 3 * 4));
            var transform = ['transform: scale(', ',', ');'].join(step / 10);
            el.setAttribute("style", transform);
        }
        reset(i + proximity, rings.length, rings);
    }
}

var rings = sortPaths(document.querySelectorAll('path.ring-border'));
for (var i = 0; i < rings.length; i++) {
    rings[i].addEventListener('mouseenter', attach(rings, i));
    rings[i].addEventListener('mouseleave', function () {
        this.setAttribute("style", "transform: scale(1,1);");
    });
}

var接近度=2；
var步长=parseInt（5/（接近度*2），10）；
功能排序路径（列表）{
变量大小=[].map.call（列表、函数（路径）{
返回{
艾尔：路，
长度：path.getTotalLength（）
};
});
返回大小。排序（函数（a，b）{
返回a.length>b.length；
}).map（函数（路径）{
returnpath.el；
});
}
功能复位（从、到、arr）{
for（var i=from；i

jsFiddle：

---

您可能需要对其进行更多的配置，但这应该非常接近您的要求。

您将jQuery和JavaScript错误地混合在一起。

填充

和

填充

之间有什么区别？那是一个打字错误吗？@Sergio抱歉，那是一个打字错误。请尝试使用（'mouseover'，function（）{$（this）.attr（“style”，“transform:scale（1.2,1.2）；”）；）上的

$（'ring_fill'）

它能工作吗？@Sergio我想用纯javascript来做这件事，没有jQuery。好的，这个类有不止一个元素吗？还是只有一个？

var proximity = 2;
var steps = parseInt(5 / (proximity * 2), 10);

function sortPaths(list) {
    var sizes = [].map.call(list, function (path) {
        return {
            el: path,
            length: path.getTotalLength()
        };
    });
    return sizes.sort(function (a, b) {
        return a.length > b.length;
    }).map(function (path) {
        return path.el;
    });
}

function reset(from, to, arr) {
    for (var i = from; i < to; i++) {
        arr[i].setAttribute("style", "transform: scale(1,1);");
    }
}

function attach(rings, i) {
    var start = proximity * -1;
    return function () {
        for (var j = start; j < proximity; j++) {
            var el = rings[i + j];
            if (!el) continue;
            var step = (j == 0 ? 13 : 10 + (j / 3 * 4));
            var transform = ['transform: scale(', ',', ');'].join(step / 10);
            el.setAttribute("style", transform);
        }
        reset(i + proximity, rings.length, rings);
    }
}

var rings = sortPaths(document.querySelectorAll('path.ring-border'));
for (var i = 0; i < rings.length; i++) {
    rings[i].addEventListener('mouseenter', attach(rings, i));
    rings[i].addEventListener('mouseleave', function () {
        this.setAttribute("style", "transform: scale(1,1);");
    });
}