I have a javascript/nw.js project with an svg (referred below as svg-canvas) element that serves as a drawing canvas and inside it I have another movable svg element (referred below as svg-encapsulate) designed to encapsulate a dynamic collection of objects in a constrained space and whose size is therefore clipped using width and height properties. That way elements drawn inside that spill over its edges are clipped, so as not to appear to be spilling outside of the element. However, when I do getBBox on the svg-canvas, the BBox returns size that also includes clipped (invisible) elements inside the svg-encapsulate, which in turn triggers scrollbars for the entire element even when visually (from the perspective what user sees) everything fits. Is there a way to instruct getBBox to ignore clipped elements of the svg-encapsulate, so that one can maintain correct scrollbar behavior? Please note since svg-encapsulate can be resized, moved, and populated with various objects by a user, hardcoded margins and workarounds will not work in this case. Thanks!
Related
I'm trying to achieve a metaball effect by blurring svg's (CSS Blur), then applying CSS contrast to the parent div to get hard edges back. Below is an example. For some reason, the filter does a weird thing on the edges.
I believe i would need to first extend the div to be bigger than the viewport, but some elements are dependent on VW and would therefore scale in an unexpected manner.. Anyone have an idea of how to expand the filter past the viewport edges?
Don't really know how to approach this, i would like the blur to extend past the viewport but retain current layout.
EDIT:
Needed to add white background to container div to make the contrast behave in the way i wanted. ( not go crazy on the viewport edges)
I need to render one element from an SVG to an image. It needs to be like it appears in the SVG, without further transforms.
The only way I can think of to achieve this, is to set the SVG's viewbox on the target element. To do this, I need to compute the element's bounding box relative to the SVG viewBox.
I've tried to use getBBox(), but I don't think it can work. Its coordinates are relative to the transformed element: the transforms of the element and its parents aren't applied. It's not possible to apply those transforms to the bbox since the transformed-bbox might not contain the object anymore: for example think what would happen if the bbox need to rotate by 45 degrees.
An alternative could be getBoundingClientRect(). However it represents the bounding box of the element relative to the screen coordinates and again it might not be enough to apply the transforms from the screen to the SVG viewport, since they could transform the bounding box in a way that breaks it.
The last idea I have is to create a new <svg> element (with no transform), place in it one (or more) <g> whose function is to apply all the transform from the original SVG's viewBox to the target element's, then place (a copy of) the target element into it and eventually call getBBox() on the newly created SVG element: if I'm not mistaken, the resulting bbox should be what I need and I can set it as the viewBox of the original SVG. Although it might not work if the target element contains some <use> elements or similar stuff. I think it'll take quite some time to implement this and I'm afraid it will be wasted time since it won't work for whatever reason.
Are there other ways to obtain an element's bounding box relative to the SVG viewBox? Otherwise other ways to correctly render one element from an SVG to an image?
Is this possible to calculate height of the text BEFORE it is inserted into DOM?
Width of the div container is known, but I need a way to calculate its height before it is inserted.
The heights of the one line of text is also known (css), so the height could be calculated by multiplying the height of one line by the amount of lines, but the question is if this is possible to calculated BEFORE it's DOM.
Since your question explicitly requires the text not to be inserted into the dom this precludes the usually used method of simply inserting it outside the viewport and then measuring there.
An alternative approach: The canvas 2D rendering context's measureText function which can be used to determine the width if you know which styling (font width) will apply in advance.
Some advanced CSS rules such as letter-spacing may make those results inaccurate.
i am trying to add tooltip for my d3 chart and is now having some problem with positioning.
What i want to get is the horizontal margin length between a div and it's father html in javascript.
you may have a look at the attached picture.
Since my page is embedded in a complex web page so i cannot get the css margin directly. But i really need that to position my tooltip.
Can anyone give me a solution?
You need the JavaScript offsetLeft property.
From https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft :
The HTMLElement.offsetLeft read-only method returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.
CSS margins are not very suitable for this, because if you have floating elements or inline-blocks, it depends on the screen width how many elements are to the left of your div. So that's not calculable directly.
after several days of researching and trying I want to see if you can help me.
I have a graph (coord) and students should mark the extrema of the graph. I have to use JavaScript for this and work in XHTML 1.0 Strict//EN. The idea was that the student clicks on the position on the graph where he/she thinks an extremum lies, this triggers a JavaScript function (addPoint) which adds an img into the same div in which the graph lies (coordDiv) and gives it the position where the student clicked. For an example visit http://ourresidence.net/JavaScript/ where you should be able to view both the site code and the JavaScript code.
As far as I understood, the positioning has to be absolute. static and fixed are incompatible with the desired behaviour and relative would be very difficult because 1. I don't know where the next "ordinary" positioning would be and 2. it would get more complicated with a student deleting a point. So, absolute it is.
Then the positioning should be absolute relative to the div coordDiv and after some time I even figured out how to give the div a concrete dimension (through it's a bit static, the approach with adjustCoordDiv() in klausur.js hasn't work out). However, if I resize the bounderies of the browser, the div and the graph wanders (since they are centered) but the point does not. That needs to be fixed.
And reading how mixed up the acknowledgement of zooming is in different browsers by now I've already completely given up handling zooming in the exercise, but if you come with a solution for that too, my praise would know no end.
Positioning is relative to some containing element in HTML that is positioned itself. If there isn't any such element, positioning is relative to document's body (as in your case). Positioning basically means to have applied some other position in CSS than static.
So you basically need to subordinate your click points to the DIV containing the whole coordinate system (as you do now ). That div should have
position:relative
without any repositioning to position it and to start a new "local coordinate system" for using
position:absolute
on any subordinated element.
On clicking, coordinates of that click need to be converted from global coordinate space to local one. This might be achieved iterating from clicked element to document element using properties offsetParent, offsetTop and offsetLeft of each passed element.