Question

我试图用jQuery为SVG数字制作动画。

CSS中我需要的是：

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

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

$("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

当前SVG2草案正式支持自定义data-*属性：

决议：＆＃34;我们将保留＆＃34;数据 - *＆＃34;要在SVG中使用的属性内容。

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

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

工作示例：

（N.B。我使用过javascript，因为我还处于学习jQuery的早期阶段）

＆＃13;

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

＆＃13;

body {
  background-color : #031F34;
  display: flex;
  justify-content: space-between;
  padding: 0 6rem;
}

a {
  cursor: pointer;
}

svg rect {
transition: all .3s linear;
}

＆＃13;

<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>

＆＃13;

如何在jQuery mouseout / mouseleave上显示默认的SVG Fill Color？

1 个答案: