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/。

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

我能做些什么才能让它发挥作用？我是svg和js的新手。

Answer 1

你的SVG代码工作正常。

缺少的是对jQuery的引用，它在您复制的javascript代码中使用。

要使jsFiddle正常工作，您需要将jQuery添加到项目中。

点击左侧“小提琴元素”菜单中的“资源”
开始输入'jQuery'
点击建议的库（目前为'jQuery 3.3.1'）
点击添加图标（+）

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

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

使用Java脚本绘制SVG - 没有绘图

1 个答案: