Get an SVG Map w/ JavaScript to Work in IE8 - javascript

I have an SVG file, which uses uses JavaScript to add a few styles. This doesn't work in IE8. I don't know if it works in IE9 either, but assume it does. It can be found here:
removed
I was told that the project called SVGWeb will allow IE8 to render the SVG and parse the JavaScript to modify the SVG. However, I have downloaded SVGWeb, and the demos don't work in IE8.
I have heard of a few other solutions that allow SVG to work in IE8.
Does anyone know if there is a way to get SVG working in IE8?

Try if the examples here work for you:
http://www.svgopen.org/2010/papers/15-SVG_in_Internet_Explorer/

After some research, this SVG will not work for IE8.
I guess I need to figure out how to convert this for Flash. SO much for web standards.

Related

D3.js and InnerHtml not showing up [duplicate]

Is there any way to make D3 compatible with IE8?
Many of the posts here and in the documentation suggested using aight.
https://github.com/shawnbot/aight/blob/master/aight.js
However, I added the lines/file mentioned to my html, but this still doesn't work in ie8.
http://matthewpiatetsky.com/jsdemo.html
Does anyone know if there are any additional steps I need to take?
Perhaps use r2d3? Not sure how to do that, but will try to figure out
D3 uses SVGs to graph and since IE8 does not support SVG it won't work.I would give R2D3 a try, it shims SVG via Raphael to be compatible with D3. There are some limitations as some functionality won't be available. Look at https://github.com/mhemesath/r2d3/ for more details
aight.js worked for me, just need to take care importing it before d3.js
Many good demos of R2D3, and Aight demos now exist.
I think that re-coding your question to demo it in one of these libraries is out-of-scope of SE, but hope you find the links useful.

Access to svg through jquery in IE 8

I am looking for a way to use jquery to manipulate SVG paths in IE8, currently I am using the following syntax and works fine in IE9+
$('svg path.someClass').css({fill:'rgb(0,0,0)'});
Is there a way I can achieve this?
Thanks for your support
As IE8 doesn't support SVG, I'd say no, you can't do that. You could possibly make IE8 at least understand that the SVG elements were elements (by using the createElement trick in the head that people use for HTML5 elements so it at least doesn't think they're completely alien), but they won't be displayed properly, so manipulating them probably doesn't make much sense.

D3 IE8 Compatibility?

Is there any way to make D3 compatible with IE8?
Many of the posts here and in the documentation suggested using aight.
https://github.com/shawnbot/aight/blob/master/aight.js
However, I added the lines/file mentioned to my html, but this still doesn't work in ie8.
http://matthewpiatetsky.com/jsdemo.html
Does anyone know if there are any additional steps I need to take?
Perhaps use r2d3? Not sure how to do that, but will try to figure out
D3 uses SVGs to graph and since IE8 does not support SVG it won't work.I would give R2D3 a try, it shims SVG via Raphael to be compatible with D3. There are some limitations as some functionality won't be available. Look at https://github.com/mhemesath/r2d3/ for more details
aight.js worked for me, just need to take care importing it before d3.js
Many good demos of R2D3, and Aight demos now exist.
I think that re-coding your question to demo it in one of these libraries is out-of-scope of SE, but hope you find the links useful.

How does RaphaelJS get inline SVG to work in Firefox 3.6?

I was playing around with RaphaelJS and realized that it gets inline SVG working in Firefox 3.6.22 (at least it looks like it, or am I fooled by Firebug...).
As my own SVG does not show up, I was wondering how RaphaelJS accomplishes this feature when Firefox 3.6 does not support blunt inlining of SVG. I (briefly) looked at the source and also found another answer how inline SVG can work in older Firefox browsers. Still, I am stuck getting this to work for myself (i.e. AJAX-loading SVG and placing it into the DOM).
I am going to answer my own question:
Raphaël is not really doing anything special (in this case).
Thanks to the answers to my post on the Raphaël Google Group I was pointed in the right direction. "Inline SVG" means "inline with common HTML" (also explained in a Mozilla blog post), so without using XHTML and proper namespacing. My prior understanding was that I could use SVG only via <object> or <embed> in some browsers (like Safari 4 or Firefox 3.6)... which is wrong.
I was adding SVG by passing it as an XML string to jQuery's .html() method. This works fine in the current versions of most modern browsers but the method name gives a hint that this might not be the right way if you want to add SVG in a browser that does not support SVG in html. So I changed my code and used document.createElementNS to add my SVG directly to the DOM. There is another way to bulk-inject my SVG-XML (as mentioned in the Google groups thread), but I did not have the time to look into it yet.
So now I got my SVG working in all targeted browsers but the older IEs, which is nice. Sample code:
var svgContainer = document.getElementById("svg-container"),
svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
g = document.createElementNS("http://www.w3.org/2000/svg", "g");
svgElement.setAttribute("version", "1.1");
// Add stuff to the group
svgElement.appendChild(g);
svgContainer.appendChild(svgElement);

Access SVG DOM when using ASV plugin in Firefox

I have to develop for Firefox using the Adobe SVG Plugin 6. When using Firefox's native SVG viewing capabilities, I can simply look at document.documentElement, which will give me the root svg element and from there I can navigate the DOM to where I want.
With the ASV in Firefox, it appears to make a skeleton HTML file with an embed in it, and I can't get past that. There don't seem to be any properties or methods from the embed that lead to the SVG document.
Supposedly there is a window.svgDocument property created by the plugin, but I can't get that to work (maybe it's IE only).
Is this possible in any way?
Sorry I do not believe this is possible.
After investigation I found that document.embeds[0].getSVGDocument() works with Firefox native SVG, and with IE using ASV, but not Firefox with ASV. There does not seem to be a way of accessing the SVG document of an SVG from outside the SVG when using Firefox and ASV.
This project has been abandoned and instead we will be displaying everything outside the SVG. But if someone knows a way, I would still be interested.
You may want to look into svgweb which adds SVG support to all browsers that don't have native support by using Flash Player.

Categories