I am trying to draw an irregular, petal shape for a D3 animation, but I cannot find any understandable documentation for odd shapes in SVG-format. How might I go about creating such a shape?
It's something like this:
<svg>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M21,34.328C21,15.693,32.477,0.515,50.124,0.515
C67.77,0.515,79,16.928,79,34.328c0,17.399-29,65.157-29,65.157S21,52.962,21,34.328z"/>
</svg>
And use as definition (defs) for future reference. Look here
and here: Is it possible to import svg shapes in d3.js?
If you want do it by hand, here's the Paths Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
Here the Codepen
Related
Currently I am using the animate tag to cycle through some colors.
<animate attributeName="stop-color" begin="0s" dur="16s" values="#00ffff;#ff00ff;#00ffff" repeatCount="indefinite" />
How are the colors being interpolated, and can I use HSL instead of RGB?
Thanks.
interpolation of colours is defined in the SVG specification. Basically distance is the standard vector distance between the colours in the RGB colour space.
Even though you can specify the end states in HSL in most UAs these days you won't get HSL interpolation. Your HSL endpoint colours would be converted to RGB and then the interpolation would take place in the RGB colour space.
I am drawing an SVG group with a circle and a piece of text. As part of an animation, I scale the group up and down. When the group is scaled relatively small, everything looks fine. However, once it gets very small, you start getting some nasty artifacts.
An example is below. Notice the circles on the right are fine, but when they get really small, you get the text artifacts on the left.
Below is some exemplary SVG code that causes the artifacts. This only seems to happen in firefox.
<g transform="translate(77 256) scale(0.00469784)">
<circle stroke="rgb(180, 0, 100)" r="30" cx="0" cy="0"/>
<text text-anchor="middle" dominant-baseline="middle" x="0" y="0" font-size="15">Foo Bar</text>
</g>
I am working with SVG in HTML to define specific shapes using the polyline tool. I am looking to animate the appearance of a specific shape into a different shape at the touch of a button and over a few seconds.
I have been looking at using the animate tool to change the polylines points attribute, but have so far been unable to find a solution or something that works perfectly.
Is it possible to do this? If not, is there a viable alternative?
You can supply polylines (and even paths with bezier curves etc) to tween, as long as they have the same number of points, because SVG just moves each (control) point independently. If the shapes don't have the same number of control points, you could just coincide some, but I guess graphical editors will "correct" this.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="5cm" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline stroke="red" stroke-width="3" fill="none">
<animate attributeName="points" dur="5s" repeatCount="indefinite"
from="100,100 900,100 900,900 100,900 100,100"
to="200,200 800,500 800,500 200,800 200,200"
/>
</polyline>
</svg>
I am aware of SVG's animation capabilities, but is there a way to easily combine pictures into animations, like in animated GIFs? For example, cycling between a circle,
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
and a rectangle,
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
Well you could possibly fade the alpha values in and out if that's the effect you are after. i.e fade out the circle and fade in the rect at the same time and vice-versa.
Having the actual shape transform from one to another would probably need to be done by you using JavaScript.
If your SVG will be viewed in a web browser, you can animate it by manipulating the nodes with JavaScript. My "web site" is an example of this.
If you would use path elements instead of the basic rectangles and circle elements it would be possible to use path morphing to morph one shape into another using SVG animations.
There is pretty good example of this at carto.net.
Depending on your use case there might be a few drawbacks with this solution. The "pictures" that you put into the animation not only needs to be path elements, there are also some more constraints such as that the path elements need to have the same number of vertices and they need to be of the same type.
When I use a rotate transform, the coordinate of the current element will be changed. See this example.
Is there someone that knows how to control the coordinates or give me some suggestions about making a rotated element animate along a path (some browsers don't support the animateMotion tag using javascript).
I find it easiest to rotate elements around the origin, and then use groups to add additional transformations.
For example, this rotates something 45 degrees, moves to 50 pixels down and left, then animates it from (50, 50) to (100, 150) over 10 seconds:
<g>
<animateTransform attributeName="transform"
attributeType="XML"
type="translate"
from="50 50" to="100 150"
dur="10s" fill="freeze"/>
<g transform="translate(50,50) rotate(45)">
Your elements here
</g>
</g>
You can build up quite complex animations this way:
http://www.petercollingridge.co.uk/blog/svg-seedling-animation
If you have a more specific description of what you want I might be able to help.