html - 有什么方法可以向嵌入式 SVG 添加类？

Question

我正在构建一个顶部有嵌入式 SVG Logo 的网站。它有一个漂亮的动画，因为它自己绘制。尽管在测试中，动画在每个页面上都以动画形式显示，但会分散注意力。我在 SVG 中添加了一个类，如果它有

 <svg class="showAnimation">

它是动画的，如果它没有那个类，它就不会动画。或者即使 showAnimation 类在任何父级上，也可以工作。但是做

<embed src="/media/logo.svg" class="showAnimation">

不起作用，因为我猜 HTML 中的类不会向下传播。我不想内联 SVG 文件并在每个页面上重新加载整个文件。

长话短说:我正在寻找一种在显示 SVG 之前从 HTML/CSS/Javascript 端向嵌入式 SVG 添加/删除类的有效方法。内联是低效的，因为它不能被缓存，使两个单独的 SVG 文件只有一个词不同是低效的。

Answer 1

您可以通过 getSVGDocument() 获取 embed 元素中的元素。

var el = document.getElementById("embed's-id");
el.addEventListener("load", function() {
  var svg = el.getSVGDocument().getElementById("your-svg's-id");
  svg.setAttribute('class', 'showAnimation');
});

如果 load 事件没有触发，尝试这样做。

function checkIfLoaded() {
  var svg = document.getElementById("embed's-id").getSVGDocument();
  if (svg == null) {
    setTimeout(checkIfLoaded, 100);
  } else {
    svg.setAttribute('class', 'showAnimation');
  }
}

checkIfLoaded();