SVG nodes, text and links no longer displaying

[alexge233]

Let me explain:

I extensively use VivaGraph Js, (version 4.x) and recently I did an upgrade of my Debian Wheezy to Jessie. After that, SVG stopped working. I tried downgrading chromium and chrome, but I think this is a rendering issue, so it has to do with the underlying mechanisms in Webkit or some other library.

WebGL nodes and links work fine, but SVG is no longer visible, yet upon inspection of the elements in the browser, they are still there, just not showing. I have since upgraded to VivaGraph 0.5.8, but the problem still persists. This is absolutely crucial for me to solve, I would really appreciate any help regarding this.

Chromium Version 37.0.2062.120 Built on Debian 7.6, running on Debian jessie/sid (281580) (64-bit). Same issue with Chrome 38, and Iceweasel (Firefox) 31.1.0

[anvaka]

Several questions:

1. Does your application work in other operating systems?
2. Are there any javascript errors?
3. When inspecting DOM tree, do you see SVG elements?
4. Do you see examples from this page: https://developer.mozilla.org/en-US/docs/Web/SVG ? Are they working?

[alexge233]

Hi anvaka,

1. It worked under Debian Wheezy, I haven't tried under other OSes
2. None at all
3. Yes, the svg elements are in the DOM tree. But they are not visible.
4. Yes I can see them.

I'm in the process of downgrading, and will try again under Debian Wheezy, but this could be a problem with regards to svg rendering, and not VivaGraph Js.

[alexge233]

Well, I could not downgrade, and had to format back to Debian Wheezy. However, the problem still persists across mozilla, chromium and chrome. DOM elements are there, but they are not displayed. This only seems to happen with svg, Webgl works fine.

[anvaka]

@alexge233 can you check if svg works for other websites?

[alexge233]

I just tested using a minified example, and it works fine. Which means that I am doing something wrong. I tried looking at css, and I have the feeling that the DOM elements are simply hidden. What could possibly make them not display?

[alexge233]

In the history of epic fails, mine is probably near there at the top. in the older browsers, the svg DOM element was somehow inheriting the properties of the graph div, and had the same attributes, e.g., height & width.

This, for some reason beyond my understanding is not the issue anymore. Although I was styling the graph div, I wasn't doing so for the svg, which was being resized into a tiny box of just 100px * 100px. The SVG elements were drawn with the respective coordinates of the graph div, yet outside the svg box, and thus, never shown. Only if (by guessing) dragged within the svg box were they visible.

I need a way to either style the svg, or set its width and height the same to the parent graph div.

Can't believe I wasted 2 days and a perfectly working installation for this. Sorry to have bothered you.

[anvaka]

Can't believe I wasted 2 days and a perfectly working installation for this. Sorry to have bothered you.

No worries at all!

I need a way to either style the svg, or set its width and height the same to the parent graph div.

I know firefox can make a tiny container for SVG if you do not give it explicit size. That's exactly the reason why all examples have this style:

<style type="text/css" media="screen">
    html, body, svg { width: 100%; height: 100%;}
</style>

[seinecle]

For anyone struggling with this, I got an ok effect with this:

#graphDiv > svg {
        width: 100%;
        height: 100%;
        min-height: 250px;
}

where graphDiv is the id of the div where you put your graph