Javascript 我如何才能使这种无缝SVG岩石纹理闪闪发光

我在图像中有岩石：

SVG本质上是这样的：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
  ...
  <path d="M61.639,162.195c0.483-0.863,0.887-1.493,1.114-1.659l-0.859,0.215C61.757,161.203,61.694,161.695,61.639,162.195z"/>
  <path d="M62.753,160.536l0.141-0.035C62.86,160.477,62.812,160.493,62.753,160.536z"/>
  <path d="M53.959,179.342c-2.256,3.034-3.331,7.56-4.521,10.83C50.734,186.206,53.188,183.417,53.959,179.342z"/>
  <path d="M53.959,179.342c0.363-0.488,0.754-0.942,1.184-1.342l-1,0.25C54.104,178.631,54.027,178.984,53.959,179.342z"/>
  <path d="M159.644,110l2-4c-2.467,3.473-4.598,7.94-5.592,11.998C157.587,115.744,158.907,112.613,159.644,110z"/>
  <path d="M117.162,179.287c0.024-0.063,0.059-0.096,0.09-0.138c-0.964-0.864-1.931-1.724-2.905-2.571
    C115.11,177.611,116.044,178.677,117.162,179.287z"/>
  <path d="M117.894,178.75c-0.193,0.177-0.464,0.158-0.642,0.398c1.052,0.944,2.1,1.896,3.142,2.852L117.894,178.75z"/>
  <path d="M182.939,156.556c-0.409,0.524-0.674,1.081-0.725,1.665c0.221,0.015,0.454-0.017,0.692-0.066
    c2.024-0.429,4.557-3.049,5.555-5.277C186.501,153.797,184.119,155.045,182.939,156.556z"/>
  <path d="M188.894,151.25c-0.012,0.482-0.17,1.041-0.432,1.627c0.984-0.461,1.866-0.842,2.432-1.127L188.894,151.25z"/>
</g>
</svg>

我在HTML中使用它，如下所示：

<div class='rock'></div>

---

问题是，我该如何取而代之的是深入研究SVG并分别为每一块岩石制作动画，使每一块岩石看起来都随机淡入淡出，闪闪发光。

per@zero298，如果将SVG用作背景图像，则无法做到这一点，因此必须将其直接嵌入页面中。也就是说，如果您直接将其嵌入，则有可能：

首先，给每条岩石路径添加一个单独的id或类，我建议随机添加五个类；我们叫他们快，中，中，中，慢，慢。然后，在CSS中创建一个简单的关键帧动画-如下所示：

<div class='rock'></div>

@关键帧淡入淡出{ 开始{ 不透明度：1； } 结束{ 不透明度：0.8；//修改此值以更改褪色的极端程度 } } 现在需要将动画应用于岩石。为了让它“闪烁”，我会使用几个不同的动画持续时间，这样它们就不会一起消失。它们将共享一些相同的属性，如：

yourSVGId路径{ 动画：fadeInOut 1s轻松无限交替； } .快{ 动画持续时间：0.3s； } .中速{ 动画持续时间：0.5s； } .中等{ 动画持续时间：0.7s； } .中速{ 动画持续时间：0.9秒； } .慢{ 动画持续时间：1.1s； }

---

如果将SVG用作背景图像，则无法引用SVG中的单个岩石。图像被认为是一个单一的实体，CSS不能影响其中的元素。考虑一下我的相关答案： 我建议将SVG嵌入到HTML中，这样您就可以作为一级实体与之交互。从这里开始，您有很多不同的方式来影响SVG，包括直接操作或使用CSS动画或转换。考虑下面使用CSS转换的例子。

功能层{ 返回Math.floorMath.random*ceil-floor+floor； } setInterval=>{ const circles=document.querySelectorAllrocky circle； const circle=圆[rand0，circles.length]； circle.classList.toggleanimate； }, 500; 岩石圈{ 不透明度：0； 过渡：不透明度400ms； } 洛基圆圈{ 不透明度：1； }

---

考虑每个路径内有随机值的动画元素：如果你使用SVG作为背景图像，你将不能引用SVG中的单个岩石。图像被认为是一个单一的实体，CSS不能影响其中的元素。考虑一下我的相关答案：我想你可以在SVG文件本身中使用CSS动画来动画，但是你不能从外部控制它们。您是否愿意将SVG嵌入到HTML中？如果将SVG嵌入到HTML中，我会怎么做？我喜欢这个答案，因为它处理CSS动画。我写了一个答案，它使用CSS转换，但原理实际上是一样的。你能演示如何实际嵌入SVG并与一起使用，使其成为重复的无缝纹理，如岩石示例中所示，所以我可以在页面的多个独立部分使用它？@LancePollard我认为实现您想要的最好方法是制作一个动画gif或动画png文件，并将其嵌入到您的背景中。你不能真正平铺一个动态嵌入的SVG文件。你能演示如何实际嵌入和使用SVG，使其成为一个重复的无缝纹理，如岩石示例中所示，以便我可以在页面的多个单独部分使用它吗？我非常喜欢这种发光效果@LancePollard这是嵌入SVG的成本。它不再是一种纹理，意味着它不能重复。如果是这样的话，我想你必须使用一种机制，不把它放在DOM中。不确定你的意思。从技术上讲，我不想让它成为一种纹理，而是让它适合每行岩石3或4个版本，然后垂直地有10或15行类型的东西。然后也许你可以使用和，尽管我不确定这是否是正确的方法。