I have a SVG path:
<path d="M124 442 L124 442 L166 393 L162 332 L200 251 L179 76" stroke="red" stroke-width="2" fill="none" fill-opacity="0.1"></path>
And I want that a DIV element move along this path when I click a "next-button".
It's like:
*startpoint (beginning of the path) + DIV element
*click next-button* + DIV element moves to station 1
*station 1
*click next-button* + DIV element moves to station 2
*station 2
*click next-button* + DIV element moves to the end of the path
endpoint (end of the path)
Does anyone have an idea how I could do that?
Found a very helpful tools. Its called path animator.
That could be your friend.
https://github.com/yairEO/pathAnimator
If you really want to animate an HTML element using SVG, then you might want to have a look at animateMotion and foreignObject.
However, this might not be the ideal and most widely supported solution in your situation. Why not use the "traditional" JavaScript way, animating the style attribute? As long as your path is restricted to simple straight line segments, this should not be too hard.
Related
Context
I want to get an arrowhead on a path to a node in a graph that I am making. Because I am using bezier curves it is easier to use the center of the points to / from which the path ends / starts respectively.
In the attached JSFiddle (below) we see a simple triangle of points, one of which is the control points for a quadratic bezier curve. In addition the end markers have been offset to make contact with the node rather than being partially behind it; this is due to paths being drawn to the centers of the points rather than the edges.
Aesthetically there are a few things not quite right with this drawing:
the tip of the arrow head is thiner than the path
although the tip is angled correctly for the arrowhead on the bezier curve, the path is not centered at the point the arrow head appears.
These aesthetic flaws occur because:
the point of an arrow head is obviously thiner than a path / the path extends through the node
the arrow head is so large in respect to the curvature of the path, there is no satisfactory solution to the arrow head problem (given the current code)
Now one could jury-rig the second issue by making a tight cubic bezier curve as done in the second SVG of the JSFiddle.
However, as seen in the third SVG, this does not work with extreme curvature either.
Questions
Is there either a simple way to ensure that the angle of the arrow-head's point and positions of the path when the arrow head joins are centered; alternatively a way to simply scale the arrow head to be small enough where one would not notice?
Is there a way to make the path starting at the arrowhead to the end invisible? / alternatively a simple way to get paths to end prior to hitting the node?
# code to meet SO requirements
# look at this code
JSFiddle
SVG Marker Demo
For your specific application, try adding a viewBox to the marker to make it smaller so it looks somewhat aligned with the end of the bezier. (SVG markers do not currently align with curves.) Change refX to 'slide' the arrow a bit forward to the end of the line.
e.g.
<marker id="arrow" viewBox="0 0 25 25" markerWidth="20" markerHeight="10" refX="20" refY="5" orient="auto" markerUnits="strokeWidth">
Why not just make the markers use your coordinate system, instead of strokeweight:
<marker id="arrow" markerWidth="40" markerHeight="30" refX="25" refY="-5"
orient="auto" markerUnits="userSpaceOnUse" overflow="visible">
<!-- path for the arrow head -->
<path d="M-18,10 l 6 -15 l -6 -15 l 40 15 l -40 15 Z"
fill="white"
stroke='black'
stroke-width='3'
opacity='1' />
</marker>
Sorted. If we draw the paths after the "points" so that the arrow heads end up on top:
I have been struggling for a little while with SVG's and clip paths.
I'm trying to create a triangle clip path that will overlay a photo to give the top a "triangle" edge.
I am trying to achieve exactly the same as the photo, but the triangle "reversed". Imagine that same triangle at the top of the photo instead of the bottom.
How would i achieve this? I am able to create the triangle itself with a fill color, but it will still display the image "above" the triangle.
Found this online, it does exactly what i want but it's the wrong way.
<svg class="bigTriangleColor2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="3 0 97 102" preserveAspectRatio="none">
<path fill="rgba(255,255,255,1)" d="M0 0 L51 102 L0 103 Z M0 205 L100 103 L100 2 Z"></path>
</svg>
Try using an SVG editor, like "Inkskape" (it's free); then:
drag & drop your images, clip & mask what-ever you wish, then
save as "plain SVG"
open the saved SVG file in your favorite text editor and remove the excess code, like the "XML" declaration at the top, and any other extras.
copy & paste the code where-ever you want it
Quick, simple, easy ;)
How can one get a scalable SVG image with texts with different sizes, all centred both vertically and horizontally?
What I would like to achieve:
What I have tried so far (JSFiddle demo):
<text x="50" y="30"
style="text-anchor: middle;alignment-baseline:middle"
fill="black" font-family="'Arial'" font-size="20">
H1 HEADLINE</text>
<text x="50" y="45"
style="text-anchor: middle;alignment-baseline:middle"
fill="black" font-family="'Arial'" font-size="15">
H2 HEADLINE</text>
Thanks in advance for any tips :) I cannot use JavaScript.
From section 10.1 of SVG 1.1:
SVG performs no automatic line breaking or word wrapping. To achieve the effect of multiple lines of text, use one of the following methods:
The author or authoring package needs to pre-compute the line breaks and use multiple ‘text’ elements (one for each line of text).
The author or authoring package needs to pre-compute the line breaks and use a single ‘text’ element with one or more ‘tspan’ child elements with appropriate values for attributes ‘x’, ‘y’, ‘dx’ and ‘dy’ to set new start positions for those characters which start new lines. (This approach allows user text selection across multiple lines of text -- see Text selection and clipboard operations.)
Express the text to be rendered in another XML namespace such as XHTML [XHTML] embedded inline within a ‘foreignObject’ element. (Note: the exact semantics of this approach are not completely defined at this time.)
As such, you need to either manually calculate the vertical location to get vertical centering, or use <foreignObject> to embed HTML+CSS within your SVG (at the correct location) which can perform vertical centering, e.g. using display:table-cell; vertical-align:middle.
Is there a way to place a group inside a rectangle object in svg and then treat that as basically a rectangle element. I want to do that because it would make animations much easier for me since I wouldn't need to move each individual element of the group but could just move the rectangle. I know I can use the translate property for the group to do animations but it would be easier if I could use fixed positions.
You could put the elements in a group <g> in a <defs> and then refer to the <g> using a <use> element to display it. A <use> element has x and y attributes.
I need to embed a SVG file into HTML file, the SVG's dimensions are bit larger. so, I need the SVG to be re-sized to the screen resolution. Is there any way to do that? Thanks.
If you want an SVG file to fit in a container the first thing to do is to set a viewBox attribute and remove width and height attributes from the root <svg> element:
<svg viewBox="0 0 100 200" ... >
The values of a viewBox are: x y width height. Read more in the SVG specification.
I dont know how complex is that SVG, but at least you can put whole description under one group , and then use transform="scale(SF)" whereas "SF" stands for scaling factor. Default is 1 (100%), so use little script:
TransFrm = "scale(" + SF + ")";
yourElement.setAttributeNS(null, "transform", TransFrm);
Or if you mean resizing by viewBox then <rect x="0" y="0" width="100%" height="100%"/>.
Or if you mean something else take a look at: http://janistoolbox.typepad.com/blog/2009/12/svgauto-resize-svg-on-an-html-page.html
Good luck.