如何在 jQuery mouseout / mouseleave 上显示默认的 SVG 填充颜色？

Question

我在尝试使用 jQuery 为 SVG 图形设置动画时遇到了麻烦。

我需要的 CSS 如下所示：

svg rect:hover {
  fill: blue;
  transition: .15s;
}

在 jQuery 中需要它，因为我希望“填充”是随机颜色而不是“蓝色”。我的问题是如何删除 mouseout/mouseleave 上的随机颜色并显示 SVG 矩形默认颜色。我所能做的就是选择另一种颜色，在示例中为紫色......

$("svg").find("rect").hover(function(){
  var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 150) + ','
                   + (Math.floor((256-199)*Math.random()) + 150) + ','
                   + (Math.floor((256-199)*Math.random()) + 150) + ')';
  $(this).attr("fill", hue);
});
$("svg").find("rect").mouseout(function(){
  $(this).attr("fill", "purple");
});

我得到了什么： http://codepen.io/pixelius/pen/NbyPzK

Answer 1

自定义data-* 属性在当前的 SVG2 草案中得到正式支持：

解决方案：“我们将保留“data-*”属性以在 SVG 中使用 内容。

来源： http://www.w3.org/2015/01/15-svg-minutes.html#item03

这意味着您可以为每个rect 创建一个属性data-fill，并在您的mouseover 事件期间将原始fill 颜色存储在data-fill - 然后在您的@ 期间从data-fill 检索相同的值987654329@事件。

工作示例：

（注意，我使用过 javascript，因为我仍处于学习 jQuery 的早期阶段）

var r = (Math.floor((256-199) * Math.random()) + 150);
var g = (Math.floor((256-199) * Math.random()) + 150);
var b = (Math.floor((256-199) * Math.random()) + 150);
var hue = 'rgb('+ r + ', ' + g + ', ' + b + ')';

function fillRandom() {
    var originalFillColor = this.getAttribute('fill');
    this.setAttribute('data-fill', originalFillColor);
    this.setAttribute('fill', hue);
}

function fillOriginal() {
    var originalFillColor = this.getAttribute('data-fill');
    this.setAttribute('fill', originalFillColor);
}

var svgs = document.getElementsByTagName('svg');

for (var i = 0; i < svgs.length; i++) {
    var svg = svgs[i];
    var rects = svg.getElementsByTagName('rect');

    for (var j = 0; j < rects.length; j++) {
        var rect = rects[j];
        rect.addEventListener('mouseover',fillRandom,false);
        rect.addEventListener('mouseout',fillOriginal,false);
    }
}

body {
  background-color : #031F34;
  display: flex;
  justify-content: space-between;
  padding: 0 6rem;
}

a {
  cursor: pointer;
}

svg rect {
transition: all .3s linear;
}

<a>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="38px" height="38px" viewbox="0 0 38 38" enable-background="new 0 0 38 38" xml:space="preserve">
        <rect fill="#01121E" width="12" height="12" />
        <rect y="13" fill="#01121E" width="12" height="12" />
        <rect y="26" fill="#01121E" width="12" height="12" />
        <rect x="13" fill="#2c845f" width="12" height="12" />
        <rect x="13" y="13" fill="#2c845f" width="12" height="12" />
        <rect x="13" y="26" fill="#2c845f" width="12" height="12" />
        <rect x="26" fill="#01121E" width="12" height="12" />
        <rect x="26" y="13" fill="#01121E" width="12" height="12" />
        <rect x="26" y="26" fill="#01121E" width="12" height="12" />
      </svg>
    </a>

<a>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="38px" viewbox="0 0 64 38" enable-background="new 0 0 64 38" xml:space="preserve">
        <rect fill="#2c845f" width="12" height="12" />
        <rect y="13" fill="#01121E" width="12" height="12" />
        <rect y="26" fill="#01121E" width="12" height="12" />
        <rect x="13" fill="#01121E" width="12" height="12" />
        <rect x="13" y="13" fill="#2c845f" width="12" height="12" />
        <rect x="13" y="26" fill="#01121E" width="12" height="12" />
        <rect x="26" fill="#01121E" width="12" height="12" />
        <rect x="26" y="13" fill="#01121E" width="12" height="12" />
        <rect x="26" y="26" fill="#2c845f" width="12" height="12" />
        <rect x="39" fill="#01121E" width="12" height="12" />
        <rect x="39" y="13" fill="#2c845f" width="12" height="12" />
        <rect x="39" y="26" fill="#01121E" width="12" height="12" />
        <rect x="52" fill="#2c845f" width="12" height="12" />
        <rect x="52" y="13" fill="#01121E" width="12" height="12" />
        <rect x="52" y="26" fill="#01121E" width="12" height="12" />
      </svg>
    </a>