I am building a web app that allows a user to interact with a bidirectional graph and play games to explore graph theory.
I am working off of this Graph Editor:
http://bl.ocks.org/rkirsling/5001347
Two problems:
I've found no information on how to display a bidirectional arrow
with SVG
I want to be able to run computations on these nodes and reference their adjacent nodes and change attributes of them. Therefore, I don't just want it to appear that the edges are bidirectional, I want them represented as bi/undirectional in their code so I can manipulate them.
I want this functionality to be accessible from the web. I first started this project using Python with NetworkX and Bokeh, but ran into some display problems and found it much less intuitive to deploy as a web app.
D3.js is powerful, pretty, and well documented. But for some reason, no one has done anything with undirectional force graphs. Is this because it isn't possible?
P.S. I've thought about just adding an arrow in each direction, but this seems inelegant and may have display and referential issues.
Thanks in advance!
You can display a bidirectional arrow using the marker-start and marker-end path attributes. Define one or more marker elements in the defs of your SVG containing the arrow head shape you want to use, give each an ID, and then apply them to your paths using either css or directly using a style attribute. e.g.
<svg width="200" height="200">
<defs>
<marker id="start-arrow" viewBox="0 -5 10 10" refX="4" markerWidth="5" markerHeight="5" orient="auto">
<path d="M10,-5L0,0L10,5" fill="#000"></path>
</marker>
<marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="5" markerHeight="5" orient="auto">
<path d="M0,-5L10,0L0,5" fill="#000"></path>
</marker>
</defs>
To use them:
// apply directly using the style attribute
<path style="marker-start: url('#start-arrow'); marker-end: url('#end-arrow');" d="M0,0L100,100" />
or
// in your css
.arrowed {
marker-start: url(#arrow-start);
marker-end: url(#arrow-end);
}
// in your SVG
<path class="arrowed" d="M0,0L100,100" />
There is also a marker-mid to apply shapes to the middle of paths.
Working demo:
.link {
stroke: black;
stroke-width: 3px;
fill: none;
}
.arrowed {
marker-start: url(#start-arrow);
marker-end: url(#end-arrow);
}
<svg width="200" height="200">
<defs>
<marker id="big-arrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
</marker>
<marker id="start-arrow" viewBox="0 -5 10 10" refX="4" markerWidth="5" markerHeight="5" orient="auto">
<path d="M10,-5L0,0L10,5" fill="#000"></path>
</marker>
<marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="5" markerHeight="5" orient="auto">
<path d="M0,-5L10,0L0,5" fill="#000"></path>
</marker>
<marker id="blob" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="3" style="stroke: none; fill: #000;" />
</marker>
</defs>
<g>
<path class="link" style="marker-start: url('#blob'); marker-end: url('#big-arrow');" d="M150,50L50,150" markerUnits="strokeWidth"></path>
<path class="link arrowed" d="M150,150L50,50"></path>
</g>
</svg>
As for Q2, d3 allows you to bind data to DOM elements or calculate layouts using established algorithms, but it doesn't really handle much beyond simple graph traversal and it doesn't hold internal representations of networks that can be reasoned over or used for computations. It can't be used for the same kinds of analyses as the likes of networkx. I know of at least one JS library, KeyLines, that can do network analysis, but it is proprietary software; I am sure there are others out there.
Related
Essentially I needed to make the center "cut-out" keep a fixed shape and size regardless of vector scale. Is there a way to achieve this?
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" style="fill-rule:evenodd;" viewBox="0 0 2802 2657">
<path d="M290 4c-95,733 -191,1466 -286,2200 760,150 1520,300 2279,450 172,-223 343,-446 515,-669 -114,-572 -229,-1144 -343,-1716 -722,-88 -1444,-176 -2165,-264zm696 1027c-103,111 -205,222 -308,333 94,111 188,222 282,333 342,-205 684,-410 1026,-616 -333,-17 -667,-34 -1000,-51z"/>
</svg>
So I managed to do something after some editing to your SVG.
To achieve what you're asking you'll need to use / have :
- the SVG mask attribute
- A very large shape for the mask ( as much large as the max scale you want to use on the visible shape )
- The shape that you want to resize
- Resize the shape with transforms
Your SVG should looks like the following
<svg>
<defs>
<mask id="theMask">
<path fill="#ffffff" d=""/>
</mask>
</defs>
<g mask="url(#theMask)">
<path fill="#ffffff" id="shapetoresize" d=""/>
</g>
</svg>
I posted a pen as a "Proof of concept"
Feel free to fork it and use it to achieve what you're trying to do.
Codepen
note: as pointed out by #thioutp , The JS is only for demo purposes, you don't need GSAP to achieve this.
I have a situation where there are multiple SVG elements in an HTML document. The elements are laid out using HTML rules, box model, flexbox, and now I'm told grid will start being used soon. This jsfiddle is an example, showing a pair of filled parabolas drawn with common endpoints and slightly different control points using a Quadratic path operation. Other cases may be simple horizontal or diagonal lines of various thickness.
In the first SVG in the fiddle, the two endpoints are in the same SVG block, and dimensions (in SVG units) are well known, and it is straightforward to draw the parabola. (the control points are also shown here)
However, the next two SVG demonstrate the problem. The endpoints are in separate SVGs, separated by unknown amounts of "stuff" here represented by a bit of text. It is clear that javascript will be required to rewrite the coordinates of the endpoints and control points, so that the parabola (or whatever) can connect the two.
How do I obtain the SVG unit coordinates of the endpoint in the second SVG relative to the coordinate system of the third SVG, so that I can connect the parabola to its left endpoint?
One possibly simplifying assumption can be made: the SVG unit to pixel coordinate ratio will be consistent for any drawing, although for added complexity that ratio may change from time to time (triggering the need to recalculate and re-draw the cross-SVG items).
A possibly complicating issue is that most of the endpoints will be nested in two layers of nested SVG elements: the outer SVG will have its SVG unit be the same size as the CSS pixel, but the inner SVG will have this different unit size that may change from time to time.
IDs or CLASSes can be added as necessary to the solution.
/**CSS*/
svg { overflow: visible; }
<!--HTML -->
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example quad01 - quadratic Bézier commands in path data</title>
<desc>Picture showing a "Q" a "T" command,
along with annotations showing the control points
and end points</desc>
<rect x="1" y="1" width="1198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<path d="M500,300 Q300,50 100,300 Q300,75 500,300"
fill="green" stroke="green" stroke-width="1" />
<!-- End points -->
<g fill="black" >
<circle cx="100" cy="300" r="3"/>
<circle cx="500" cy="300" r="3"/>
</g>
<!-- Control points and lines from end points to control points -->
<g fill="#888888" >
<circle cx="300" cy="50" r="3"/>
<circle cx="300" cy="75" r="3"/>
</g>
<path d="M100,300 L300,50 L500,300
L300,75 L100,300"
fill="none" stroke="#888888" stroke-width="1" />
</svg>
<br>
<svg width="2cm" height="6cm" viewBox="0 0 200 600"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example quad01 - quadratic Bézier commands in path data</title>
<desc>SVG left endpoint</desc>
<rect x="1" y="1" width="198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<!-- End points -->
<g fill="black" >
<circle cx="100" cy="300" r="3"/>
</g>
</svg>
some stuff here
<svg width="2cm" height="6cm" viewBox="0 0 200 600"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example quad01 - quadratic Bézier commands in path data</title>
<desc>SVG right endpoint</desc>
<rect x="1" y="1" width="198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<path d="M100,300 Q-100,50 -300,300 Q-100,75 100,300"
fill="green" stroke="green" stroke-width="1" />
<!-- End points -->
<g fill="black" >
<circle cx="100" cy="300" r="3"/>
</g>
</svg>
(In general, the coordinates will not have the same Y position, this example is simplistic: but all I need is a way to determine the position of the endpoint in the proper coordinate system.)
This was hard for me to figure out, but a co-worker helped, and we finally puzzled through it. The solution turns out to be fairly straightforward.
The way we puzzled things out, it seems that there is a coordinate transformation matrix that can be used to convert from SVG user coordinates to browser pixels... and, via its inverse, back to SVG user coordinates. This is obtained for each starting and ending elements by:
start = document.getElementById('startSVGElement');
spt = start.createSVGPoint();
sCTM = start.getScreenCTM();
end = document.getElementById('endSVGElement');
ept = end.createSVGPoint();
eCTM = end.getScreenCTM();
Then, to draw from a point ( 100, 400 ) in the starting element, to a point ( 50, 60 ) in the ending element, you fill in the points:
spt.x = 100;
spt.y = 400;
ept.x = 50;
ept.y = 60;
Now the transformation magic: transform the ending point from SVG space to browser pixel space based on its CTM, and then transform back to SVG space using the starting element CTM inverse:
ept_in_start = ept.matrixTransform( eCTM ).matrixTransform( sCTM.inverse())
Now spt and ept_in_start have coordinates relative to the same element (the starting element) and in the same coordinate system (the SVG space of the starting element), and you can use those coordinates to draw anything you wish, based on the coordinates.
Of course, if the page reflows, you have to recalculate and redraw. And you have to be sure to get the right CTM for the (x,y) coordinates of each endpoint... there are lots of overlaid coordinate systems if you have nested SVGs and transformations.
Good afternoon everyone,
I'm defining an SVG on my page with the following defs.
<svg width="0" height="0">
<defs>
<g id="stroke-hexagon">
<polygon fill="#002663" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="12" points="57.8,185 5.8,95 57.8,5 161.8,5 213.8,95 161.8,185 "/>
</g>
<g id="hexagon">
<polygon fill="#006890" points="52,180 0,90 52,0 156,0 208,90 156,180 "/>
</g>
</defs>
</svg>
...and implementing it later in the HTML using this:
<svg width="208px" height="180px" viewBox="0 0 208 180" >
<use xlink:href="#hexagon"></use>
<text class="faicon" x="50%" y="70px" fill="white" font-size="80px" text-anchor="middle"></text>
<text text-anchor="middle" x="50%" y="70%" fill="white">Logo Here</text>
</svg>
Works totally fine. I am also able to style the polygon's fill with simple CSS. Looks like this:
#hexagon:hover polygon {
fill:#990000;
}
The hover effect fails, however, whenever the mouse leaves the polygon and instead hovers over either of the 'text' elements within the svg. Is there a way to define a CSS rule that prevents this behavior. Or, would it be better (easier) to change the attribute using JS / jQuery?
Thanks!
Your texts are rendered on top of your polygon and are therefore intercepting mouse events. You should set up a css rule like
text {
pointer-events: none;
}
This will prevent the text from becoming a target of mouse events which should give you the desired hover effect for the polygon.
I want to make a drawing effect of tree that looks something like this one with a progressive line like here. I would prefer using only css3 with svg/canvas and js. Do you have any ideas?
More info:
I tried to cut a tree into pieces and animate piece by piece the appearance but it's not cursive cause it's to much details on syncronizing delays and durations because every piece has a different length and so on. All of this is made without svg. I want to now if i can animate a line path.
Yes, take a look at this rendering of the Bahamas Logo using CSS 3
It describes his process, and techniques. Also you can view the source.
There are more that can be found here
Update:
Also maybe this Sencha Animator product may help?
You can do this with plain SVG. SVG provides the <animate> element for declarative animation.
What you want (as I understand it) is a line that appears as if it was drawn in front of the viewer's eyes. You can use the stroke-dasharray property for this purpose. This property defines a dash pattern using a series of values that defines the length of dashes and gaps. The strategy would be: First we have a dash that has length 0 and a gap that is at least as long as the whole path. This means we see nothing (or only the first point at the start of the path). In the end we want a dash that's at least the full length of the path. We want the dash to gradually become longer and longer until it reaches its final length (the length of the full path).
The simplest case would be:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<!-- This is the path of a spiral -->
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
<!-- This defines the animation:
The path is roughly 2305 units long, it will be drawn in 5 seconds -->
<animate from="0,2305" to="2305,0" dur="5s"
attributeName="stroke-dasharray" repeatCount="indefinite"/>
</path>
</svg>
More sophisticated things can be done using multiple values (using the values attribute) instead of one from and one to value:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
<animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite"
values="0,2305;
2000,305;
2305,0"/>
</path>
</svg>
You can specify the precise timing (when which value listed in values will be reached) using the keyTimes attribute:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
<animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite"
values="0,2305;
2000,305;
2305,0"
keyTimes="0;.9;1"/>
</path>
</svg>
See this in action on Tinkerbin.
Something similar can be done using CSS3:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<style type="text/css">
path {
animation-name:animateDash;
animation-duration:5s;
animation-iteration-count:infinite;
}
#keyframes animateDash {
from{stroke-dasharray:0,2305}
to {stroke-dasharray:2305,0}
}
</style>
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305"/>
</svg>
Decide for yourself which method you prefer.
Looking for ideas on how to animate what looks like a laser drawing out a word in a cursive font using SVG. The animation can be done with SMIL or JavaScript I don't care - though I think it would be easier with SMIL.
I am pretty sure if I could just get the letters represented as a path I could figure out how to animate a line from a fixed point to the word path - even if the path is non-continuous.
Any ideas?
EDIT
My demo was very basic, essentially I wrote animate functions for each letter and arranged their timing. Here is the letter X for example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<rect x="0" y="0" width="100%" height="100%" fill="black"/>
<path id="word" stroke="red" d="M10 10 L40 40 M40 10 L10 40" />
<line x1="10" y1="10" x2="25" y2="50" stroke="blue" stroke-width="0.5">
<animate attributeName="x1" begin="0s" dur="1s" values="10; 40;" />
<animate attributeName="y1" begin="0s" dur="1s" values="10; 40;" />
<animate attributeName="x1" begin="1s" dur="1s" values="40; 10;" />
<animate attributeName="y1" begin="1s" dur="1s" values="10; 40;" />
<set attributeName="visibility" to="hidden" begin="2s" />
</line>
</svg>
I am sure we can all agree that this is not an ideal long term solution... I thought it would be relatively easy to animate one end of a LINE along a path but I am having problems just getting the path...
Extract the paths from the glyphs in question, then apply a dash-array animation as seen in this example on each of the paths.
From a high level perspective, I would think you would want to do something like render the font to a canvas, then use the pixel information to generate the animation sequence. A simple algorithm could just trace from left to right, it would be a good deal harder to figure out a single stroke path, but that is doable as well.
You don't mention any idea of what platform or any time constraints, so its hard to get much closer than that.
One possibility... SVG Fonts are, I understand, stored as a sequence of SVG commands used to draw individual characters. The vector-based nature of drawing in SVG would seem like it would be amenable to 'tracing out' characters in realtime; you might be able to make a conversion utility to pre-convert SVG fonts to simple paths.