I’m working on a project that leans pretty heavily on changing fill attributes within SVGs. I’ve got a simple script working to do it which works perfectly when I preview my project.
However it doesn’t work at all when I export the project and run the exported file off my hard drive. Switching the svg for another works, but changing the fill colours no longer functions.
When I upload the exported files to a server and run it from there altering the fill colour works again, but this project is designed to run locally, not on a server…
Edit: this is the error I get in the console in Safari:
“Blocked a frame with origin “null” from accessing a frame with origin “null”. Protocols, domains, and ports must match.
(anonymous function)HYPE-466.thin.min.js:14
fHYPE-466.thin.min.js:48:213
HYPE-466.thin.min.js:14:99”
“Error in changeColoursInSVG: TypeError: null is not an object (evaluating ‘svgDoc.getElementById’)”
Chrome gives me this error in the JS console:
changeColoursInSVG: SecurityError: Failed to read the ‘contentDocument’ property from ‘HTMLObjectElement’: Blocked a frame with origin “null” from accessing a cross-origin frame.
I’ve attached a test project, any help with this issue would be greatly appreciated.
There is a lot of missing semi colons in the javascripts (not optional ones though), however that doesn’t change it.
This is above my knowledge since I’m not used to work with SVG’s, however your should try and find a way to get rid of the security issues, perhaps find an answer on http://stackoverflow.com
In further googling I found out that in order to run changes to an SVG element you will need to host the site on a server.
This is a very similar problem that happened to me when working with php.
The best way to host it, either locally or online is to use an application called MAMP (WAMP on windows).
Follow the instructions when installing it, locate the folder called “www” and put your stuff in there. If the little tray icon is green (windows) or by text telling you that it’s working properly, start all the services.
When this is done, go to your adress bar in a browser and type in localhost/svgtest.html in order to open up the site.
Another way of doing it is to put your site on a web hotel that is hosting your stuff. Simply download filezilla and upload it there.
If you use an img tag then for security reasons you will not be able to access the DOM of the image data. The image is effectively the same as an animated bitmap as far as the container is concerned.
Using an <iframe> or <object> tag will allow you to manipulate the embedded object's DOM.
Thanks for your help @markus and @Daniel ! Thanks for the tip on the semicolons as well Markus, I’ve been a little lax with those.
I used the Object tag in this example, but unfortunately that led to this problem. I really appreciate the tip on MAMP Markus, but I’m hoping to avoid that here. I’m eager to create a solution that just launches with a double click on the html file, as it’s very possible that I’ll want to package some of this code up into an application with a webview later on…
It’s a shame that the object tag isn’t working in this scenario because it’s perfect otherwise.
I’m going to have a bit of a fiddle with inline SVGs, my thinking is that maybe I can load a bunch of SVGs into variables on the scene load, place the contents of those variables (hopefully the SVG markup) in the innerHTML of some DIVs when I need them and then alter the fills on the paths in that newly created inline SVG. It’s not so elegant, and I’m not sure if it will work or not… But I’ll give it a shot.