javascript动画SVG在Wordpress中不起作用

Question

我的 javascript 动画 SVG 无法在 WordPress 中运行。任何人都可以提供如何制作动画 SVG 的最佳实践吗？

我的第一个想法是 - 它是否因为在 SVG 文件中包含 javascript 的安全性而无法正常工作...

文件按原样工作： https://aau.gagarindigital.dk/wp-content/uploads/2021/07/stack-test-menu_3x.svg

我的 SVG 文件如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 912.83 882.07">

   <defs>
    <style>
 :root {
        --color-1: #F2B705;
        --color-2: #C30F0E;
        --color-3: #264ABA;
        --color-4: #009CD2;
        --color-5: #E25727;

        
        --color-11: #C29204;
        --color-22: #990B0B;
        --color-33: #172E73;
        --color-44: #006B8E;
        --color-55: #BA4620;
  }
#c1 {
  fill: var(--color-1);
}
#c2 {
  fill: var(--color-2);
}
#c3 {
  fill: var(--color-3);
}

#c4 {
  fill: var(--color-4);
}

#c5 {
  fill: var(--color-5);
}
        .cls-7 {
        fill: #a1ac75;
      }
        
circle:hover:not(.active) {
  stroke: #999;
  stroke-width: 11.5;
}

circle.active {
  stroke: black;
  stroke-width: 11.5;
}

line {
  stroke: gold;
  stroke-width: 4;
}

line.highlight {
  stroke: black;
}
    </style>
    
  </defs>
    <polygon id="fem-kant" class="cls-7" points="456.29 7.49 898.87 329.05 729.82 849.33 182.76 849.33 13.71 329.05 456.29 7.49"/>

      <line class="c3 c5" x1="656.32" y1="748.57" x2="133.5" y2="368.62"/>
      <line class="c2 c4" x1="258.55" y1="747.22" x2="779.33" y2="368.43"/>
      <line class="c1 c4" x1="258.55" y1="747.22" x2="457.43" y2="133.5"/>
      <line class="c1 c3" x1="457.43" y1="133.5" x2="657.03" y2="748.57"/>
      <line class="c5 c2" x1="133.5" y1="368.62" x2="779.33" y2="368.43"/>
      <line class="c1 c2" x1="779.33" y1="368.43" x2="457.43" y2="133.5"/>
      <line class="c2 c3" x1="779.33" y1="368.43" x2="657.03" y2="748.57"/>
      <line class="c3 c4" x1="258.55" y1="747.22" x2="657.03" y2="748.57"/>
      <line class="c4 c5" x1="258.55" y1="747.22" x2="133.5" y2="368.62"/>
      <line class="c5 c1" x1="133.5" y1="368.62" x2="457.43" y2="133.5"/>

  <a href="#0">
      <circle id="c1" cx="455.9" cy="133.5" r="133"/>
        </a>
  <a href="#0">
      <circle id="c2" cx="779.33" cy="368.43" r="133"/>
      </a>
  <a href="#0">
      <circle id="c3" cx="656.32" cy="748.57" r="133"/>
      </a>
  <a href="#0">
      <circle id="c4" cx="256.18" cy="748.57" r="133"/>
      </a>
  <a href="#0">
      <circle id="c5" cx="133.5" cy="368.62" r="133"/>
      </a>

<script>
<![CDATA[
var  allCircles = document.querySelectorAll("circle");

window.addEventListener('DOMContentLoaded', (event) => {

    // Add an click handler to every circle that
    // adds the class "active" to the clicked circle.
    allCircles.forEach(element => {
        element.addEventListener("click", clickHandler);
        element.addEventListener("mouseover", mouseoverHandler);
        element.addEventListener("mouseout", mouseoutHandler);
    });
    
});

function  clickHandler(evt) {
    // Clear current selection (remove class "active" from any circle)
    allCircles.forEach((circle) => circle.classList.remove("active"));
    // Mark clicked circle selected
    evt.target.classList.add("active");
    // Clear any currently highlighted lines
    clearHighlightedLines();
}

function  mouseoverHandler(evt) {
    let activeCircle = document.querySelector("circle.active");
    let hoveredCircle = evt.target;
    if (activeCircle && (activeCircle != hoveredCircle)) {
        // Get the line that has classes matching both the actibve and hovered circle
        let line = document.querySelector("line."+activeCircle.id+"."+hoveredCircle.id);
        // Add the class "highlight" to that line
        if (line)
            line.classList.add("highlight");
    }
}

function  mouseoutHandler(evt) {
    clearHighlightedLines();
}

function  clearHighlightedLines() {
    // Find the line with class "highlight" (if any)
    var line = document.querySelector("line.highlight");
    // Remove the class "highlight"
    if (line)
        line.classList.remove("highlight");
}
    //]]>
    </script>
</svg>

但是 javascript 不起作用，并且 SVG 文件在 WordPress 中看起来像这样： https://aau.gagarindigital.dk/sample-page/

如果脚本应该在 SVG 文件之外 - 我可以链接到放置在站点根目录的脚本吗？ SVG 文件中的链接是什么样的？

Answer 1

我在my answer to your last question 中犯了一个小错误。

var  allCircles = document.querySelectorAll("circle");

部分应该在DOMContentLoaded 事件内。我相信如果你能解决这个问题，它会有所作为。