Question

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

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

相关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;
}

以及相关的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="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>

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

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

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

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

Answer 1

正如@Kaiido所说，您因为style属性覆盖CSS而感到沮丧。因此您的悬停规则无效。

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

style="stop-color:#ffffff"

到

stop-color="#ffffff"

此外，您有错字。 </rect在第二个矩形中应为</rect>。

.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渐变颜色停止

1 个答案: