适用于 codepen 但不适用于 Wordpress

Posted 2023-02-22

【中文标题】适用于 codepen 但不适用于 Wordpress

【英文标题】：Works in codepen but not in Wordpress

【发布时间】：2018-03-19 12:33:22

【问题描述】：

我正在尝试让这个动画 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"   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

【问题讨论】：

你还没有添加cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js

浏览器控制台有错误吗？

请注意代码太长，无法在 sn-p 中使用。请改为点击 codepen 的链接。

嗨 Aakanksh，是的，该库正在 WP 中加载。

仅仅说“它不工作”是不够的信息。树是否加载，但点击动画不起作用？它根本没有加载吗？有任何错误信息吗？您尝试过什么解决方法？

【参考方案1】：

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

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

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

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

【讨论】：

控制台说 jquery 没有定义。

我相信 jQuery 中的 Q 应该是大写的。 premium.wpmudev.org/blog/adding-jquery-scripts-wordpress

【参考方案2】：

使用 jQuery 代替“$”符号。例如：jQuery("#svg-container");