I'm making a project which uses HTML elements as nodes in a diagram and uses Raphaël to draw lines between them. The problem is that the lines always wind up underneath the HTML elements. I have tried
raphael.canvas.style.zIndex = 1000;
(which is larger than all my other z-indexes) and also tried placing the SVG canvas as the last element in the DOM with no luck. How can I make these lines be drawn on top?
Have you ensured that your SVG element, and its containing element, are relatively or absolutely positioned? z-index only applies to positioned elements, not elements that have static (the default, in-flow) positioning.
Related
How can I position SVG elements relative to other siblings? I want this to be similar to how in HTML, elements get laid out relative to each other automatically (for instance, left to right, top to bottom), except (solely) with the ability to specify an offset from the bound of the other object (since left to right AND top to bottom together don't make sense in SVG).
Currently I am trying using getBoundingClientRect (and then laying things out relative to the parent using transform:translate styling but this seems to be buggy on some platforms and difficult to deal with in certain situations. In addition with this scheme, if any SVG element moves, the other elements don't move. With relative positioning they would get automatically re-laid out if the SVG element they were relative to moved.
How can I do this?
I have a div with several divs inside. The number of internal divs can change so the height of the outer div is dynamic. Then I have another div on the right of the first whose height must always match, which I want to use as an SVG canvas. I've solved the height issue using table-row and table-cell in CSS. But when I try to add SVG to it using a library such as Raphael or D3 the layout completely breaks. I've tried several variations and fixes suggested online with no success: if the canvas div doesn't change size then the SVG doesn't fill it up properly. Please help. I struggle to understand HTML and CSS layout.
You can see the problem here: http://jsfiddle.net/ofuh701p/4/ by clicking on the button. The black should all turn into red, without any layout changes.
Here is another simpler example of the same problem: http://jsfiddle.net/88f2L4h1/ . In this case I'm using the solution from https://stackoverflow.com/a/8418039/2482744 to achieve equal height divs.
You can explicitly set your SVG element's width and height to the same values as its parent container using clientWidth and clientHeight.
Here's a fiddle demonstrating it using D3.
http://jsfiddle.net/ofuh701p/8/
Here is the kind of thing I want:
http://jsfiddle.net/ofuh701p/6/
I was hoping that this could be solved using just CSS, as this seems like a really simple requirement and I can't understand why the SVG messes things up so much. This solution uses uses javascript to set the height dynamically based on the DOM elements which feels like a hack:
var c = Raphael("braces-canvas", 50, $("#selectable-container").outerHeight());
Also the divs are now using display: inline-block.
does any one know any js code that would allow the svg element (entire contents too) to be resized depending on the size of the window set by the user. my users will want to view d3 graphics in a small customized view on their active desktops. while at the same time others will have it running full screen on their active desktops. this means that the graphs will need to resize them self depending on the users preference.
I put together a demo of this desired behavior a few days ago. Check it out here - http://bl.ocks.org/4444770
Basically, you listen to the size of the window, apply a proportional transform to the g element that wraps all SVG elements, and adjust the size of the parent SVG. Call this code on pageload and on window resize, where "container" is the div holding the SVG:
d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")");
$("svg").height($("#container").width()*0.618);
This is a good method if your SVG is placed within a div.
The other way is to use the SVG viewBox, as demonstrated by Mike Bostock here - http://bl.ocks.org/harlantwood/raw/6900108/. This method is best if you are appending the SVG to the body, and I'm sure there is a way to use this method when placing the SVG inside of a div, but I was unable to find a solution, and thus created the above work around.
You can adjust an svg.attr("width").attr("height") either on loading the page or on resizing, but you'd need additional behavior in your code to get the d3 elements to change with the new size.
You can also look into the .viewBox attribute of an svg object, which will scale the svg elements dynamically, but I've found its behavior among different browsers to be spotty:
http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
I'd like to get some ideas on how to implement this.
Here is the sketch:
Description: I have a scene (canvas on the sketch) and let's say 2 panels. Canvas lays in the DIV with position relative, panels are outside of this DIV and there are some elements over this DIV with position absolute. All these elements are draggable.
Every element is a div with inner canvas.
Problem: I need to implement zoom of this canvas somehow. I am zooming canvas (there is a grid drawn on it) and elements are zooming as well. It could be scaling (I know about quality after scaling bitmap, it's acceptable in my case). The only problem I don't really know how to solve is how to scale both canvas and independent elements which are over it, that we have an illusion that scene is scaling. Hope you've got the idea what I am trying to do.
If your target browsers support CSS3 transforms, you could apply a transform to your floating divs to match the one in the canvas, e.g. set style to transform: scale(1.5,1.5).
Note: you'll probably want the div wrapping the canvas and the absolute divs to have overflow: hidden so that you only show things in that area.
I've got a <div> element on page with SVG in it. Sometimes during program execution the size and position of containing div changes. SVG follows the div but doesn't scale along with it, unfortunately. How can I get SVG bigger or smaller when the size of containing element changes?
I use Raphael library for SVG creation and jQuery for events and DOM manipulation.
You can use setViewBox()
http://raphaeljs.com/reference.html#Paper.setViewBox
However, if you use this for scaling there will no longer be a 1:1 unit:pixel scale.