如何将 CSS 类更改为 <use>SVG 里面的孩子? [英] How to change CSS class to an <use> children inside a SVG?

问题描述

我正在制作动画，目标是更改 SVG 中的 xlink:href.(这是为了改变形状)，并根据他们在里面的位置改变等级.

I am making and animation the objetive is change the xlink:href inside a SVG. (this is for change a shape), and change class respect to their position inside.

这是我的 SVG

<svg viewBox="-20 -20 600 200" id="main">
  <defs id="test">
    <rect width="80" height="80" id="circle" fill="red" class="first" />
    <rect width="80" height="80" id="square" fill="pink" class="second" />
    <rect width="80" height="80" id="cross" fill="blue" class="third" />
  </defs>

  <g id="load-area">
    <use x="0" xlink:href="#circle" />
    <use x="100" xlink:href="#square" />
    <use x="200" xlink:href="#cross" />
  </g>
</svg>

每个rect元素中的类，根据位置有不同的animation-delay(第一次在0s执行，第二次在2s执行，第三次在4s执行，依此类推).

The class in every rectelement, has a different animation-delay according to position (first execute at 0s, second at 2s, third at 4s and so on).

使用 JS，我在 #load-area

main.children['load-area'].children[0].setAttribute("xlink:href", getFigure(random()));

它可以工作，形状发生了变化，但是，假设当它的 id 是 #cross 的三倍时，那么所有元素都有 third CSS 类.

And it works, the shape changes but, suppose when it gets three times the id #cross then all elements have third CSS class.

我需要在 的每个子级中更改 CSS 类，我该怎么做?

I need change CSS class inside every children of <use>, How can I do that?

在元素树下面:

我得到所有 <use> 与: main.children['load-area'].children 但它没有子元素，正如我向你展示的下面:

I get all <use> with: main.children['load-area'].children but it does not have child element, as I show u below:

推荐答案

你可以使用与 nth-child 选择器结合的 CSS 变量来解决这个问题，你不再需要这些类.

You can solve this using CSS variables that you combine with nth-child selector and you no more need the classes.

这是一个基本的例子

rect {
  animation:change 3s var(--d,0s) infinite;
}
@keyframes change {
  0% {
    opacity:1;
  }
  33%,100% {
    opacity:0;
  }
}

#load-area > use:nth-child(1) {--d:0s}
#load-area > use:nth-child(2) {--d:1s}
#load-area > use:nth-child(3) {--d:2s}
/*#load-area > use:nth-child(N) {--d:Xs}*/

<svg viewBox="-20 -20 600 200" id="main">
  <defs id="test">
    <rect width="80" height="80" id="circle" fill="red" />
    <rect width="80" height="80" id="square" fill="pink" />
    <rect width="80" height="80" id="cross" fill="blue" />
  </defs>

  <g id="load-area">
    <use x="0" xlink:href="#circle" />
    <use x="100" xlink:href="#square" />
    <use x="200" xlink:href="#cross" />
  </g>
</svg>

<svg viewBox="-20 -20 600 200" id="main">
  <g id="load-area">
    <use x="0" xlink:href="#square" />
    <use x="100" xlink:href="#circle" />
    <use x="200" xlink:href="#cross" />
  </g>
</svg>

如果数字未知或非常大，您可以轻松使用 JS 循环:

If the number is unknown or very big you can easily use a JS loop:

var e = document.querySelectorAll('#load-area use');

for(var i=0;i<e.length;i++) {
  e[i].style.setProperty('--d',i+"s");
}

rect {
  animation:change 3s var(--d,0s) infinite;
}
@keyframes change {
  0% {
    opacity:1;
  }
  33%,100% {
    opacity:0;
  }
}

<svg viewBox="-20 -20 600 200" id="main">
  <defs id="test">
    <rect width="80" height="80" id="circle" fill="red" />
    <rect width="80" height="80" id="square" fill="pink" />
    <rect width="80" height="80" id="cross" fill="blue" />
  </defs>

  <g id="load-area">
    <use x="0" xlink:href="#circle" />
    <use x="100" xlink:href="#square" />
    <use x="200" xlink:href="#cross" />
  </g>
</svg>

这篇关于如何将 CSS 类更改为 <use>SVG 里面的孩子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！