javascript - 适用于 codepen 但不适用于 Wordpress

Question

我正在尝试让这个动画 svg 树在 Wordpress 中工作。它在 codepen 中运行良好，但在我的本地主机上的 Wordpress 页面中却根本无法运行。

任何人都可以看出缺少/错误的地方吗？在页面源代码中，正在加载 javascript 文件。

svg tree

var svg = $("#svg-container");
svg.children().find("path:not(.except)").click(function(e) {
  $("#Layer_1 path").removeAttr("style");
  $this = $(this);
  var bbox = this.getBBox();
  var centreX = bbox.x + bbox.width / 2;
  var centreY = bbox.y + bbox.height / 2;
  $this.css("transform-origin", centreX + 'px ' + centreY + 'px');
  $this.css("transform", "scale(4)");
  $this.css("stroke", "");
  $this.css("fill", "");
  this.parentElement.appendChild(this);
})

#svg-container {
  width: 500px;
  height: 500px;
}

#svg-container svg {
  width: 100%;
  height: 100%;
}

@font-face {
  font-family: "Amaranth";
  src: url('https://fonts.googleapis.com/css?family=Amaranth');
}

<div id="svg-container">
  <!--?xml version="1.0" encoding="utf-8"?-->
  <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

  <script type="text/javascript">
    < ![CDATA[

    ]] >
  </script>
  <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="1247.24px" height="1360.63px" viewBox="0 0 1800 1400" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve">
  
<g>
<font>
  <font-face font-family="Amaranth">
    <font-face-src>
      <font-face-uri xlink:href="https://fonts.googleapis.com/css?family=Amaranth" />
    </font-face-src>
  </font-face>
</font>
<text x="10" y="10" font-weight="bold" font-size="75" fill="#3ABDF2" font-family="Amaranth">The tree</text>
  
	<path class="except" fill="#3E6325" d="m1175 917.29c-11.44-1.847-21.576 0.042-32.652 2.825-3.182 0.8-6.644 1.598-10.131 1.985 48.901-29.163 .....continued"
     fill="#639357"
     id="path5022" /><path
     d="m604.1 171.56s-18.18-9.487-18.989-9.087c-0.812 0.401-2.108 1.365-0.619 2.624 1.491 1.259 18.873 8.725 20.208 8.689 1.331-0.037 1.5-1.57-0.6-2.226z"
     fill="#3E6325"
     stroke="#A64F2C"
     stroke-miterlimit="10"
     id="path5024" />
</g>
</svg>
</div>

https://codepen.io/paulfadams/pen/PRzMNE?editors=1111

Answer 1

我曾经遇到过同样的问题。

WordPress 附带了自己版本的 jQuery 库。

尝试使用“jQuery”而不只是“$”符号。

例如: var svg = $("#svg-container");应替换为 var svg = jQuery("#svg-container");