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?