悬停时过渡SVG渐变颜色停止 [英] transitioning SVG gradient color-stops on hover

问题描述

所以我有此CodePen: https://codepen.io/naregjan/pen/MBzQWp

在其中，我在SVG框架内有四个矩形，其中两个具有渐变.我想为悬停时的渐变过渡停止色，类似于这支笔.

相关CSS:

  .red {填充:url(#grad1);}.red〜defs stop {过渡:1s；}.red:hover〜defs stop:first-child {停止颜色:#ffbbcc;}.red:hover〜defs stop:last-child {停止颜色:#0000ff;} 

以及相关的HTML(正方形是通过JS生成的；这是通过Chrome浏览器检查器生成的):

 < svg id ="sqSVG" width ="500" height ="500">< rect class ="square green" x ="135" y ="135" width ="100" height ="100"></rect>< rect class =方形绿色" x ="10" y ="135" width ="100" height ="100"></rect< rect class ="square red" x ="135" y ="10" width ="100" height ="100"></rect>< rect class ="square red" x ="10" y ="10" width ="100" height ="100"></rect>< defs>< linearGradient id ="grad1" x1 ="0％" y1 ="0％" x2 ="110％" y2 ="110％">< stop offset ="0％" style ="stop-color:#ff0000"></stop>< stop offset ="100％" style ="stop-color:#ffffff"></stop></linearGradient></defs></svg> 

我不知道怎么了.它不仅不会设置动画，也不会改变悬停时的停止颜色，而且我无法弄清楚与我链接的示例有何不同.这些rects在defs之前创建，并且它们共享一个父对象，因此选择器应该可以工作...我缺少什么?

如果相关，这是我的方块制作功能:

  function makeSquares(){var svg = document.querySelector(#sqSVG");var squares = [{x:"10"，y:"10"，颜色:红色"}，{x:"135"，y:"10"，颜色:红色"}，{x:"10"，y:"135"，颜色:绿色"}，{x:"135"，y:"135"，颜色:绿色"}];squares.forEach(sq => {var newSq = document.createElementNS("http://www.w3.org/2000/svg"，'rect');newSq.setAttribute("class"，"square" + sq.color);newSq.setAttribute("x"，sq.x);newSq.setAttribute("y"，sq.y);newSq.setAttribute("width"，"100");newSq.setAttribute("height"，"100");svg.prepend(newSq);});} 

...但是我不认为是这样，因为当用HTML进行硬编码时，它也不起作用.帮助吗?

解决方案

正如@Kaiido所说，您被挫败了，因为 style 属性会覆盖CSS.因此，您的悬停规则无效.

解决方法是将其更改为属性.更改

  style ="stop-color:#ffffff" 

到

  stop-color =#ffffff" 

此外，您有错字.在第二个矩形中，</rect 应该是</rect> .

  .red {填充:url(#grad1);}.red〜defs stop {过渡:1s；}.red:hover〜defs stop:first-child {停止颜色:#ffbbcc;}.red:hover〜defs stop:last-child {停止颜色:#0000ff;}  

 < svg id ="sqSVG" width ="500" height ="500">< rect class ="square green" x ="135" y ="135" width ="100" height ="100"></rect>< rect class ="square green" x ="10" y ="135" width ="100" height ="100"></rect>< rect class ="square red" x ="135" y ="10" width ="100" height ="100"></rect>< rect class ="square red" x ="10" y ="10" width ="100" height ="100"></rect>< defs>< linearGradient id ="grad1" x1 ="0％" y1 ="0％" x2 ="110％" y2 ="110％">< stop offset ="0％" stop-color =#ff0000"></stop>< stop offset ="100％" stop-color =#ffffff"></stop></linearGradient></defs></svg>  

So I've got this CodePen: https://codepen.io/naregjan/pen/MBzQWp

In it, I've got four rects inside of an SVG frame, and two of them have gradients. I want to transition the stop colours for the gradients on hover, similarly to this pen.

The relevant CSS:

.red{
  fill: url(#grad1);
}
.red ~ defs stop{
  transition: 1s;
}
.red:hover ~ defs stop:first-child {
  stop-color: #ffbbcc;
}
.red:hover ~ defs stop:last-child {
  stop-color: #0000ff;
}

And the relevant HTML (the squares are generated via JS; this is via the Chrome Inspector):

<svg id="sqSVG" width="500" height="500">
  <rect class="square green" x="135" y="135" width="100" height="100"></rect>
  <rect class="square green" x="10" y="135" width="100" height="100"></rect
  <rect class="square red" x="135" y="10" width="100" height="100"></rect>
  <rect class="square red" x="10" y="10" width="100" height="100"></rect>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="110%" y2="110%">
      <stop offset="0%" style="stop-color:#ff0000"></stop>
      <stop offset="100%" style="stop-color:#ffffff"></stop>
    </linearGradient>
  </defs>
</svg>

I can't figure out what's wrong. It won't just not animate, it won't change the stop colour on hover at all, and I can't figure out what's different from the example I linked. The rects are created before defs and they share a parent, so the selector should work... what am I missing?

In case it's relevant, here's my square-making function:

function makeSquares(){
  var svg = document.querySelector("#sqSVG");

  var squares = [
    {x : "10", y : "10", color: "red"},
    {x : "135", y : "10", color: "red"},
    {x : "10", y : "135", color: "green"},
    {x : "135", y : "135", color: "green"}
  ];

  squares.forEach(sq => {
    var newSq = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
    newSq.setAttribute("class", "square " + sq.color);
    newSq.setAttribute("x", sq.x);
    newSq.setAttribute("y", sq.y);
    newSq.setAttribute("width", "100");
    newSq.setAttribute("height", "100");
    svg.prepend(newSq);
  });
}

... but I don't think it is, because it won't work while hard-coded in HTML, either. Help?

解决方案

As @Kaiido said, you are being thwarted because style attributes override CSS. So your hover rules were having no effect.

The fix is to change them to attributes. Change

style="stop-color:#ffffff"

to

stop-color="#ffffff"

In addition, you had a typo. </rect should be </rect> in the second rectangle.

.red{
  fill: url(#grad1);
}
.red ~ defs stop{
  transition: 1s;
}
.red:hover ~ defs stop:first-child {
  stop-color: #ffbbcc;
}
.red:hover ~ defs stop:last-child {
  stop-color: #0000ff;
}

<svg id="sqSVG" width="500" height="500">
  <rect class="square green" x="135" y="135" width="100" height="100"></rect>
  <rect class="square green" x="10" y="135" width="100" height="100"></rect>
  <rect class="square red" x="135" y="10" width="100" height="100"></rect>
  <rect class="square red" x="10" y="10" width="100" height="100"></rect>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="110%" y2="110%">
      <stop offset="0%" stop-color="#ff0000"></stop>
      <stop offset="100%" stop-color="#ffffff"></stop>
    </linearGradient>
  </defs>
</svg>

这篇关于悬停时过渡SVG渐变颜色停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！