Change size of svg-element dynamically while moving an element - javascript

I got some moveable items in a svg-element as shown here:
JSfiddle: http://jsfiddle.net/xfvf4/37/
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="300" version="1.1"></div>
As you can see, the items can be moved to the edge of the svg. I tried to achieve that the svg gets bigger as moving an element to the edge. i.e. if you move a rechtangle to an area near an edge (i.e. 20px), the svg gets bigger as you are moving the item.

Related

SVG & HTML: getBBox and getBoundingClientRect not the same as when hover over node in inspector

So I have an <g> tag in an svg element with a clip-path that consists of a rectangle defined by {x:0,y:0,width:1000,height;800}. I added the clipping path as I wanted to hide some overflown children of this tag.
When I select this tag and call either getBBox() or getBoundingClientRect() for some reason I get the rectangle of the clipping path - not the dimensions of the overflow.
This is strange for two reasons:
mouse-over the element in the browser inspector (mozilla and chrome) shows the correct dimensions (width:1200, height:800).
in a similarly structured document, these methods return the dimensions with overflow.
So what is the correct behavior? and how do I get the full width of an svg element with clip-path hidden elements?
Both the SVG 1.1 spec and the CSS masking spec state this:
A clipping path affects the rendering of an element. It does not affect the element’s inherent geometry. The geometry of a clipped element (i.e. an element which references a <clipPath> element via a clip-path property, or a child of the referencing element) must remain the same as if it were not clipped.r
And this is what happens in the example below. So this might not be what your result is about.
Note that the results for .getBBox() and .getBoundingClientRect() differ. That is because the first states size in the local userpace coordinate system, while the latter states size in screen pixels. It might not be obvious that a transformation has been taking place between the two, as it might be hidden implicitely in the relation between viewBox, width and height attributes of the <svg> element.
const clipped = document.querySelector('#clipped');
const bbox = clipped.getBBox();
console.log(bbox.x, bbox.y, bbox.width, bbox.height);
const bcrect = clipped.getBoundingClientRect();
console.log(bcrect.x, bcrect.y, bcrect.width, bcrect.height);
<svg width="400" height="300" viewBox="0 0 200 200">
<clipPath id="cp">
<rect x="50" y="50" width="100" height="100" />
</clipPath>
<rect id="clipped" width="200" height="200" clip-path="url(#cp)" />
</svg>

How do I make a draggable and resizable rectangle appear on click and disappear on release?

As of now, I have a dynamic graph inside of a rectangle. The rectangle itself is coded like:
<rect width="50%" height="100px" class="graph_rect" style="fill:none;pointer-events:all;" </rect>
Right now, I don't have any JavaScript code that works for this goal. But, I was hoping to create another rectangle on top of "graph_rect" such that:
When I click on "graph_rect" a this rectangle of width:0 and height:100px appears
When I drag, that boxes width will always equal the number of pixels away from the initial point
When I release the mouse, it just disappears
Add an onclick attribute to graph_rect. When graph_rect is clicked, you can then call a function to toggle its visibility.
You can also use the Drag and Drop feature of HTML5 in order to determine when the element is being dragged and adjust the size and position of the element accordingly.
https://www.w3schools.com/css/css_display_visibility.asp
https://www.w3schools.com/html/html5_draganddrop.asp

Snap.svg - Inconsistent SVG Rendering between Chrome / Firefox

I'm working with animated SVGs / Snap.svg for the first time, so please forgive my lack of knowledge on this subject.
I made a series of 3 animated SVG "frames" (400x300px), each nested within a larger SVG (1200x300px) to contain them all. A div element with a clip style property hides the other two "frames" when they're not ready to be shown.
Using Snap.svg, each frame is supposed to "slide" into view using translate after a certain amount of time, and within each frame are some animated elements.
Long story short: the animation looks perfect in Firefox, but it looks awful in Chrome/Webkit. In Chrome, it looks like each of the frames are just being stacked on top of each other instead of side-by-side.
In addition, two of the elements (the cow circle joules and the graph circle graph) are rendering in the upper-left corner instead of using their translate property to position them in the center-right area.
You can see the animation in Plunker. Please try it out in both browsers to see what I mean.
http://plnkr.co/UhTy83
Firefox GIF screen capture:
Chrome GIF screen capture:
Thanks Ian in the comments to my question! Swapping out the <svg> tags for <g> (group) tags fixed this problem. It's interesting to me that Firefox allows you to transform <svg> elements but Webkit does not.
Before:
<svg class="slides" width="1200" height="300">
<svg class="slide1" width="400" height="300"></svg>
<svg class="slide2" width="400" height="300"></svg>
<svg class="slide3" width="400" height="300"></svg>
</svg>
After:
<svg class="slides" width="1200" height="300">
<g class="slide1"></g>
<g class="slide2"></g>
<g class="slide3"></g>
</svg>

svg elements being clipped

Does anyone know why the behavior displayed in the above images might be occurring? In the first image, the x and y coordinates of the svgArcs container are set to zero so the center is in the top left corner and only the bottom right corner is displayed, as expected. In the second image, I moved the container, but still only the bottom right corner is displayed. I posted the document structure so maybe you can take a look and tell me what's going on.
By default <svg> elements clip their contents.
You could specify overflow="visible" on them or alternatively (and better) use a <g> element as a container rather than an <svg> element. You'll still need to keep the outermost SVG element an <svg> element.

css - how do I make svgs responsive?

I am getting svg data by api call and appending it to div in a DOM. There are 13-14 svg elements I am getting and appending it to a single div. I want to display all this svgs in a row. If I give width: 5.5%; to svg elements, all the svgs display in a row. But when I resize window or monitor size is small, all svgs overlap each other. I've created an example in jsfiddle. Please find this fiddle
I tried with preserveAspectRatio and viewBox in svg but it's not working.
Update: I've updated fiddle. In a default size of resule in jsfiddle, overlapping is visible. I want it to be responsive.
How do I make these svgs responsive so that it doesn't overlap each other?
For these purpose better to use img tag:
<img src="path_to_svg" style="width: 5.5%" />
And in the svg file you should add attribute such as
<svg width="100%" height="100%"> .... </svg>
In this case image will resize as you want.

Categories