Question

我正在建立一个顶部有嵌入式SVG徽标的网站。它有一个漂亮的动画，因为它吸引自己。虽然在测试中，动画会分散注意力，因为它在每个页面上都会动画。我在SVG中添加了一个类，如果它有

 <svg class="showAnimation">

它会动画，如果它没有该类，则它不会动画。或者即使showAnimation类在任何父级上，也可以。但是做了

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

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

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

Answer 1

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

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

有什么方法可以将类添加到嵌入式SVG中？

1 个答案: