Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to load an external JavaScript script to (pure) SVG document?

Tags:

javascript

svg

I have fairly large script within an .svg file and I'd like to get it out of the CDATA section into an external file. How to achieve this?

The HTML regular does not work:

<script type="text/javascript" src="Track_animation.js" />

The documentation I have been able to find only concerns with JS embedded within the SVG itself. Is use of external scripts even possible?

Using OS X and Safari 4.0.4 for rendering.

like image 786
akauppi Avatar asked Nov 25 '09 14:11

akauppi

People also ask

Can you put JavaScript in SVG?

JavaScript can be added anywhere in an SVG document between the opening and closing <svg> tags. In general, a script should be placed at the end of the document to avoid blocking and allow the script complete access to the DOM.

How is an external JavaScript loaded into a document?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

Where do I put JavaScript script files?

JavaScript in <head> or <body> You can place any number of scripts in an HTML document. Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.

What file type is given to external JavaScript files?

An external JavaScript file must be saved by . js extension.

2 Answers

Try this

<script xlink:href="file_name" />
like image 90
vsr Avatar answered Sep 17 '22 03:09

vsr

Maybe you will need to have xmlns:xlink="http://www.w3.org/1999/xlink" as attribute in your <svg ... >.

like image 36
piR Avatar answered Sep 19 '22 03:09

piR
Sign in to Comment

Related questions

Change SVG path with JavaScript
Check if argument is passed to a Java Script function [closed]
What is the difference between D3.js and Cytoscape.js? [closed]
IE8 does not support querySelectorAll
Return updated collection with Mongoose
Trigger parsley validation without submit form?
Default value for a Handlebars` template placeholder
Generate random date between two dates and times in Javascript
setTimeout ReactJS with arrow function es6
Uncaught TypeError: Cannot read property 'firstChild' of null (Google maps failing to load) [duplicate]
Chartjs random colors for each part of pie chart with data dynamically from database
Focus input field with JQuery without selecting current value text
HTML5 Audio Visualizer? [closed]
Difference between getElementById and jquery $('#smth')
Detecting Google Maps streetview mode
AngularJS toggle button
How do I get the http.server from the express app?
getting mouse coordinates in React and jQuery
What is the difference between Promise.any() and Promise.race()
`Vue3 - Vite` project alias src to @ not working

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!