CODEWITHSUNDEEP
javascripthtmlsvg
Albert-Vasile Şerban
Albert-Vasile Şerban

Reputation: 7

Drawing SVG with Java script - no drawing

I have the following code 

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

It doesn't work, I've copied the content from here.

What could I do to make it work ? I am newbie in svg and js.

Upvotes: 0

Views: 44

Answers (1)

Johan
Johan

Reputation: 130

Your SVG code works fine.

What is missing is a reference to jQuery which is used in the javascript code that you copied.

To get your jsFiddle working, you need to add jQuery to your project.

  • click 'resources' in the 'Fiddle meta' menu to your left
  • start typing 'jQuery'
  • click the suggested library (currently 'jQuery 3.3.1')
  • click the add icon (+)

Now jQuery is added to your project and the SVG is drawn in the output as expected.

When starting to work with javascript it's a great idea to get familiar with the browser console. It's an essential tool in troubleshooting, because it simply tells you when something went wrong.

Upvotes: 1

Related Questions