用Java脚本绘制SVG - 无图形

Question

我有以下代码

<div id="map-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink"
                         style="position:absolute;width:100%;height:100%;z-index:0">
                        <path id="dotted-line"
                              stroke-dasharray="20,10"
                              fill="none" stroke="#F7C700" stroke-width="2px" />
                        <path id="animated-line"
                              stroke-dasharray="20,10"
                              fill="none" stroke="#793C25" stroke-width="4px" />
                    </svg>
  <div class="start"><span>Start Here</span></div>
  <div class="point one">
    <button>One</button>
  </div>
  <div class="point two">
    <button>Two</button>
  </div>
  <div class="point three">
    <button>Three</button>
  </div>
  <div class="point four">
    <button>Four</button>
  </div>
  <div class="point five">
    <button>Five</button>
  </div>
</div>

https://jsfiddle.net/n9szmw3g/。

它不起作用，我已经复制了此处的内容。

我该怎么做才能使它起作用？我是SVG和JS的新手。

Answer 1

您的SVG代码正常工作。

缺少的是对您复制的JavaScript代码中使用的jQuery的引用。

要使您的jsfiddle工作，您需要在项目中添加jQuery。

• 在您的左侧的"小提琴元"菜单中单击"资源"
• 开始键入'jquery'
• 单击建议的库(当前'jquery 3.3.1'(
• 单击添加图标( (

现在添加到您的项目中，并按预期在输出中绘制SVG。

开始使用JavaScript时，熟悉浏览器控制台是一个好主意。这是故障排除的必不可少的工具，因为它只是告诉您何时出现问题。