SVG element as a Container? - javascript

I have a rectangle made from svg rect tag and now want to embed a circle into it. I found that svg elements cannot contain child elements or I guess I din get appropriate example. Please let me know is it possible to have one element into another as a child and then too visible. May be with a higher z-index? How is it possible using Raphael?

Just add the circle as a later sibling of the rectange and it will draw over the top. If you want the rectangle to draw over the circle you'd put it after the circle. It's called painters model as whatever you paint last is on top of everything else.
SVG doesn't have a z-index property at the moment although there is a proposal to add it to the upcoming SVG 2.0 specification.
If you want to learn SVG there's an online primer

The SVG group tag <g> seems like the most equivalent to HTML's <div> container tag.
From https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g :
The g element is a container used to group objects. Transformations applied to the g element are performed on all of its child elements.
Permitted content: Any number of the following elements, in any order

If you're interested in creating complex shapes, paths offer a lot of possibility. You get the same persistent state, attribute malleability, and interactivity (click, hover, drag) that the rect and circle primitives have, but with no limitations on region complexity.
As an added bonus, with cleverly selected paths you can morph cleanly from one shape to another. For instance, check this fiddle out.
There are many aids for building complex paths... for most projects, Google's SVG-edit is perfectly sufficient.

Related

Draw an outline around a group of objects that surrounds the objects drawn area (not a bounding box)

I am trying to figure out a way to draw an outline around the area of a group of items as illustrated hopefully clearly in the sample image.
The idea is a user creates a bunch of rectangular objects always adjacent (vertically/horizontally), groups them together and then clicks a button to create the outline. I cannot figure out the outline part.
My only idea so far is to perhaps export the group to SVG and then manipulate it somehow (eg. add a thick border and use a clipPath to keep only the outer part of the border). Not even sure this idea is right because my SVG knowledge is kind of limited. Perhaps this can all be done in the context of fabricjs or with the help of an additional library?
(Using fabricjs 3.6.3)
Sample of outline around drawn area of objects
Scenario with group of objects where an object is in landscape position

Detemine all elements at a given point js

I am working on an API that use shapes (and irregular) shapes to build websites. My problem is where I can provide a div that can carry as a background to irregular shapes so .
However to do this I would need to know the max area the object is taking up by having the max height and width.
I am aware that element.getBoundingClientRect does this but my roadblock is that is does not consider any psuedo elements, which is how most of these shapes are made.
I know when working with the CSS transform property, especially using scale, the browser knows to resize the whole shape including the pseudo element that makes up the shape.
It also uses the border-box coordinate system.
However the browser does not provide this information as it comes from the user agent
My main question is how do I access the dimensions the user agent computes for any given element, or how do I find the proper dimensions of a 'getBoundingClientRect' that considers an elements psuedo classes
My shapes can be found in the attached links.
httpsmichaelodumosu57.github.iosigma-xi-mu
https://css-tricks.com/examples/ShapesOfCSS/
I can't afford to use any other method to create my shapes because I have limited time on the project, but I do know that the browser can provide me with the information I am looking for.
Yes I have answered my own question. What you want to do is to scale the image to a very small since (since transform scale() works perfectly) and place it in a grid box (this could be a div of small size as well. You would run document.elementsFromPoint(x, y)
(notice the pluralization) on every point in the div containing you shrunked irregular shape and from there you can find the height and width of its bounding box by the difference of the highest range of their respective coordinate values. To center you must place your irregular shape in the bounding box of the background drop with the re-scaled dimensions (remember your skrunked your irregular shape to find them) and have the margin of the inner shape set to zero. This works only if your real (not pseudo element) is to the left most of the screen. Question is how do you position your background when your irregular shape is not properrly centering inside of it?
You can use document.elementFromPoint(x, y) for getting the element that exists in specific point, but I have not tested it for any kind of shapes.

D3.js on Canvas hover on node to select its links

First off, i've seen questions like this posted several times, but they are all based on SVG, classes and CSS. I'm aiming at solving this using canvas because my final force layout will use 1000+ nodes and svg just doesn't cut it. Also, I have a background in programming but am total n00b to d3. So maybe i'm just missing something obvious.
Here's my current code:
http://bl.ocks.org/gonzam88/3ff2f33975ca8258f4aa9484be4255ce
I guess on mouseover I have to loop all links and check if either source or target matched the current node, but after many attempts i'm not too sure how to achieve this, and how to change specific links properties (when not using SVG).
I feel i'm close but not just there :)
Thanks for reading and hope my english is ok!
UPDATE 1
I've managed to detect links related to hovered node, but when I try to change its stroke it changes every stroke in my graph.
check:
http://blockbuilder.org/gonzam88/9d48b4346fadb6b719a9ce9efb98a899
In this example I only want each group to change to blue line. But both 'groups' are being changed.
Links are drawn on line 140 and my color function is on line 57. How do set stroke color to specific links?

D3: Merge interior svg paths?

I have an svg element composed of many different path objects, each of which represents one U.S state.
http://jsfiddle.net/jGjZ2/
I would like to merge the east territory (gold) into a single path object with no visible divisions.
The end result should look like this (ignore the inaccuracies):
I am using D3.
There is no GeoJSON or TopoJSON data - the map is svg directly embedded in html (see jsfiddle).
Thanks a lot!
Assuming you can ignore the stated restriction of manipulating an existing SVG image (which seems like an arbitrary restriction given the ready availability of cartographic boundaries in more easy-to-manipulate formats…), you can use topojson.mesh to merge multiple polygons. Though, note this approach has a few limitations as described in this example:
Another simple approach is to just draw the highlighted polygons twice: once with a thick black stroke and no fill, and a second time on top with orange fill and no stroke. This achieves the same effect without any need for topological manipulation:
I suppose if you really had to, you could reach into the SVG element and do the same thing by extracting the vector data, but it will be easier if you start from clean data.

Raphael repeat background pattern

I would like to have a repeated pattern of squares (a little like a blueprint) as a background to the entire SVG element. I am using Raphael. How can I accomplish this?
I want to do this with SVG rather than images as I pan / zoom the SVG using SetViewBox and I would like the background to scale appropriately too.
One option is to render those squares the usual way, via paper.rect(). Might be expensive, though, and would take some maintenance if the canvas can grow in size.
The other option is to do a patterned fill, paper.rect(0,0,100,100).attr({fill: "url(images/pattern.png)"}); (see this tutorial), which should automatically repeat the image it is given. I haven't done that myself, though, so I'm not really sure how the pattern is scaled when you do SetViewBox().

Categories