How can I find problem in javascript code

Question

Yesterday, I was playing around with my JavaScript and suddenly I have strange Bugs in my Code, that I could not solve.

My Website loads a svg-element:

<div id="content">
<svg id="drawing"
     title="Layouteditor"
     viewBox="0 0 600 500"
     xmlns="http://www.w3.org/2000/svg"
     version="2.0"
     preserveAspectRatio="xMidYMid meet"
     onload="makeDraggable(evt)">
</svg>
</div>

With some console-loggign , I can see, that makeDraggable is run once. Directly after document is loaded ( document.ready ) I get the following message:

0: 'makeDraggable' is not defined

I definitely know that this function worked without any issues before. I tried to empty everything so only document Ready has this line:

console.log("documentReady"); 

And also makeDraggable has one line

console.log("makeDraggable");

This is the Output:

makeDraggable 8 (780,9) documentReady 8 (709,9) 0: 'makeDraggable' is not defined

Of Course I have a bunch of other functions in my site but how could I find out, where the second call Comes from and why it is running into an error?

Answer 1

Ok, I found my fault. I added a link to a Stylesheet in my MVC-Site. In this Stylesheet I had a fault, that I didn't see because Styling worked as expected. Seems that SVG has some Problems with Styling. I tried to style a text

.CDC400 {
font: 10px sans-serif;
fill: black;
stroke-width: 0;
}

This class is attached to a SVG Text. If I try to fill: red; everything works, with black it doesn't??? Also Hex-values don't work. WTF?

...Update, HEX-Values work after second refresh of the site...