0

I have an HTML file that contains Snap.svg (just a Javascript API) animation which refers to an SVG file. 

window.onload = function () {

var s = Snap("#headDiv");
Snap.load("emotions.svg", function(f) {

I'm trying to get this to run locally in an Android WebView, but the funny thing is that my webpage runs perfectly only from a server when accessed with:

mWebView.loadUrl("http://www.myurl.com/index.html");

As soon as I put my webpage files into the assets folder

enter image description here

and access with

mWebView.loadUrl("file:///android_asset/index.html");

Everything runs fine, (including the external Javascript files) except my SVG doesn't display at all. I've tried with API 16 and 19 with the same results: runs fine from server, no SVG display from local. It makes me wonder if I'm referring to my files wrong or something.

EDIT: I also just found out that the webpage works locally in Firefox, but NOT Chrome. The issue may lie here.

Aaron
  • 531
  • 3
  • 8
  • 22
  • It's possible the limitation lies in `Snap` somehow. Without a reproducible sample, it's hard to say. – CommonsWare May 08 '15 at 16:48
  • @CommonsWare this seems to be the case. I was able to simply add an SVG to the HTML body and it rendered just fine. I just found out that my same webpage works locally in Firefox, but NOT Chrome. I believe my issue lies here. – Aaron May 08 '15 at 17:07
  • `WebView` is based on the same basic engine that Chrome uses, so if you're having Chrome problems, you may have similar problems in `WebView`. – CommonsWare May 08 '15 at 17:09

1 Answers1

0

The reason this is happening is because Snap.load() makes an AJAX request, which isn't allowed locally in Chrome, which in turn isn't allowed locally in Android WebView.

Placing the SVG within the HTML and referring to it with Snap.select() is a good work-around, as explained here: How to select fragments of an existing SVG using Snap.svg

Community
  • 1
  • 1
Aaron
  • 531
  • 3
  • 8
  • 22