-2

I want to have an svg embedded in an html doc reference an external javascript function.

I have an html document with an embedded svg file and a link to a js file. I would like the svg to run one of the javascript file's function when i click on the svg

function newGame(){
/* do stuff */
}
<!doctype html>
<html>
<head> 
 <link rel="stylesheet" href="styles.css">
</head>

<body> 
  <script src="main.js"></script>
 <div id="buttondiv">
  <svg id="restart" class="button" viewbox="0 0 24 24" onclick="newGame();">
   <circle cx="12" cy="12" r="6" />
  </svg>
 </div>     
</body>
</html>

my question is NOT that i want to reference an svg with javascript (but i am willing to if i have to)

this is for a chrome web app and in chrome dev editor if it matters.

thank you

UPDATE:

I get this error in the console log:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Can somebody please explain this?

Justin
  • 558
  • 4
  • 15
  • 1
    And did you tried anything? You code is actually working for me – Kaiido May 17 '15 at 02:58
  • The same applies as for extensions: http://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working – Xan May 20 '15 at 09:09

1 Answers1

-1

Inline js is unsafe so it won't let anyone execute it.

Justin
  • 558
  • 4
  • 15