I wanted to animate a rectangle so that it follows a given path which worked thus far using animateMotion. This is what I have got:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
<rect height="40" width="40" style="fill:#777; stroke:none;"/>
<animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/>
</g>
<path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>
Now my question: How do I get the rectangle to follow the path (already achieved) with the center of the rectangle (20 20) always being on the path? Can this be achieved with the means SVG offers?
Sure, just add a transform to the rect.
html, body, svg {
height: 100%;
width: 100%;
}
<svg>
<g>
<rect transform="translate(-20,-20)" height="40" width="40" style="fill:#777; stroke:none;"/>
<animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/>
</g>
<path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>
</svg>
The translate acts to move the rect origin from 0,0 to the rectangle centre.
Related
I want to rotate the pointer around its axis of the following SVG component.
How could I achieve that. I have tried it with following method but it doesn't rotate around it.
<g id="Group 1" transform = "translate(100, 100) rotate(45 0 0)">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd" d="M302.248 291.371L230.862 209.521L212.309 230.492L302.248 291.371Z" fill="#72A1E7"/>
</g>
It is easier to:
rotate something if it can be centered around 0,0.
calculate the angle of the needle if you know the angle at the starting point.
Therefor the you could draw the needle like this, with the middle of the short line at 0,0 (yes, it is off-canvas) and then pointing at 6 o'clock:
svg {
background-color: silver;
}
<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd"
d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>
Now the needle can be moved to the center (or where ever) of the image:
svg {
background-color: silver;
}
<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1" transform="translate(100 100)">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd"
d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>
The rotation can be done in different ways, but here I rotate the needle/path <path> itself to the imagined zero point of the meter and then use the group element <g> to give the meter a "value". So, here the calculation is that the meter takes up 300 deg, the zero value is at 30 deg (from 6 o'clock) and the max value is then at 330 deg. Here the value is 1/3 = 100 deg.
svg {
background-color: silver;
}
<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle transform="rotate(120 100 100)" cx="100" cy="100" r="85"
stroke="blue" stroke-width="5" stroke-dasharray="300 360" pathLength="360"
fill="none" />
<g id="Group 1" transform="translate(100 100) rotate(100)">
<path id="Point" transform="rotate(30)" fill-rule="evenodd"
clip-rule="evenodd" d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>
SVG code:
<svg style="bottom: 0; position: absolute;"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 30">
<path
fill="#fafafa"
fill-opacity="1"
d="M 0 0 C 220 30 580 30 800 0">
</path>
</svg>
How can I invert svg path or fill the rest with white bg but leave svg patch transparent to parent background ?
Any help ?
Just extend the path so that the enclosed space is the negative of the current curve:
<svg style="bottom: 0; position: absolute;"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 30">
<path
fill="#fafafa"
fill-opacity="1"
d="M 0 0 C 220 30 580 30 800 0 v 30 h -800 z">
</path>
</svg>
The v 30 draws a 30 pixel line to the bottom of the page, the h -800 draws a line back to the left edge of the page, and the z draws a line back to the start of the shape.
The following code assigns the colour green to all the three lines of the SVG path.
<svg height="210" width="400">
<path d="M 150 0
L 75 200
L 225 200
L 150 0"
fill ="none" stroke="green" stroke-width="3" />
</svg>
Can I know how I can assign separate styles to each line?
In this case the solution would be using 3 different lines:
<svg height="210" width="400">
<g stroke-linecap="round" stroke-width="3" >
<path d="M 150 0
L 75 200" stroke="green"/>
<path d="M75 200
L 225 200" stroke="gold"/>
<path d="M225 200
L 150 0" stroke="red"/>
</g>
</svg>
It is not possible to have multiple styles within a single SVG path.
Can I just finish a path where I started it and it will be considered closed or does the Z command have to be used?
For example, is this
path d="M150 0 L75 200 L225 200 L150 0" stroke="black" fill="none"
the same as this
path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="none"
or are there two points on same spot (150, 0) in the first and the second example?
There is a slight difference. If a path isn't closed, then you are liable to see missing pixels at the corner where the two ends of the path meet. Here's an example:
<svg width="360" height="100" viewBox="0 0 360 100">
<g stroke-width="20" fill="none">
<path d="m10 10h80v80h-80v-80" stroke="#f00" stroke-linecap="butt" />
<path d="m130 10h80v80h-80v-80" stroke="#0a0" stroke-linecap="square" />
<path d="m250 10h80v80h-80z" stroke="#04f" />
</g>
</svg>
The path on the left is open, and since the two vertices at the top left are unconnected, you can see a gap where the two line caps overlap. This can be fixed by adding stroke-linecap="square" to the svg markup, but in most situations it would make more sense to use a closed path, as shown on the right.
Edit:
For curved shapes where you don't want a straight-line segment between the start and end points of the path, just put the start and end points in the same place. If your tangents are aligned in the same direction, it probably doesn't matter if you leave leave the path open unless you have the stroke-linecap set to butt, in which case the end sections will be liable to project away from the path slightly. For example:
<svg width="160" height="160" viewBox="-80 -80 160 160">
<path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70" fill="#fcc" stroke="#f00" stroke-width="20" stroke-linecap="square"/>
</svg>
<svg width="160" height="160" viewBox="-80 -80 160 160">
<path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70z" fill="#afa" stroke="#0a0" stroke-width="20" stroke-linecap="square"/>
</svg>
If you look closely, you can see some slight blockiness at the bottom of the red shape where the line caps extend past each other. The green shape has a closed curve, so there are no line caps to worry about.
■ Addendum:
Just landed back on this page after a few days, and it looks like Chrome has been updated in the meantime (currently using Chrome version 53.0.2785.116/64 bit on OS X). It now seems that open paths are closed automatically if the start and end points are coincident within a small margin of error.
Here's that first graphic again, but with three open paths where the start and end points are separated by 0.1px, 0.001px and 0.00001px respectively (from left to right):
<svg width="360" height="100" viewBox="0 0 360 100">
<g stroke-width="20" fill="none">
<path d="m10 10h80v80h-80v-79.99" stroke="#f00" stroke-linecap="butt" />
<path d="m130 10h80v80h-80v-79.9999" stroke="#0a0" stroke-linecap="butt" />
<path d="m250 10h80v80h-80v-79.999999" stroke="#04f" stroke-linecap="butt" />
</g>
</svg>
I'm not sure I agree with this behaviour. It's liable to cause glitchiness with animated paths:
<svg width="120" height="120" viewBox="0 0 120 120">
<path id="p" d="M10 10 110 10 110 110 10 110 10 10" stroke="#f00" fill="none" stroke-width="20" />
<animate xlink:href="#p" attributeName="d" attributeType="XML" from="M9.99999 9.99999 110 10 110 110 10 110 10 10" to="M10.00001 10.00001 110 10 110 110 10 110 10 10" dur="1s" fill="freeze" repeatCount="indefinite" />
</svg>
Adding Z command at the end of path or adding the starting point at the end of the path is essentially doing the same thing.And it does not add an extra point on the same spot.It just joins the points.
How I can draw a SVG path with a repeated symbol along the path ?
An example in this picture :
http://i.stack.imgur.com/jqy0Z.png
Thanks a lot !
You can use a <marker> element to place a symbol at each vertex of a polyline. This has the advantage that the symbols can be automatically aligned to the path direction. However, you will still have to place each vertex there yourself. I don't think there is any way of having a symbol repeat automatically at a fixed interval along a path.
<svg width="400" height="100" viewBox="0 0 400 100">
<defs>
<marker id="chevron"
viewBox="0 0 20 20" refX="10" refY="10"
markerUnits="userSpaceOnUse"
markerWidth="20" markerHeight="20"
orient="auto" fill="#49f">
<path d="M0 0 10 0 20 10 10 20 0 20 10 10Z" />
</marker>
</defs>
<path d="M40 50 60 59.57 80 67.68 100 73.1 120 75 140 73.1 160 67.68 180 59.57 200 50 220 40.43 240 32.32 260 26.9 280 25 300 26.9 320 32.32 340 40.43 360 50"
fill="none" stroke="none"
marker-start="url(#chevron)"
marker-mid="url(#chevron)"
marker-end="url(#chevron)" />
</svg>