We Keep Coding

SVG: Export for mophing Animation

When I create a SVG Path in Illustrator and change the position of the points for a morphing animation the points are totally different!
For example:
<path d="M 355.077,300c-31.017,0-31.017-200-62.034-200 s-31.017,200-62.034,200c-31.015,0-31.015-200-62.031-200c-31.014,0-31.014,200-62.029,200c-31.013,0-31.013-200-62.026-200"/>
and
<path d="M355.077,217.635 c-31.017,0-31.017-64.507-62.034-64.507s-31.017,185.701-62.034,185.701c-31.015,0-31.015-274.316-62.031-274.316 c-31.014,0-31.014,175.276-62.029,175.276c-31.013,0-31.013-97.737-62.026-97.737"/>
are the same path (with moved points obviously). However, the order in which they occur is totally different and therefore the animation pushes the points all around the SVG element.
I have tried all export scripts Illustrator offers.
Is there a trick for getting a consistent result when exporting? So that the points are at the right place? Perhaps a plug-in I can use?
Thanks!

This is not an answer. This is just to say that the paths can be used for morphing since the commands and the number of the commands is the same. However if the paths you have are different a solution would be to change all the commands to C
<svg viewBox="0 0 400 400" width="300">
<path fill="gold" d="M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200">
<animate
attributeName="d"
attributeType="XML"
values="M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200;
M355.077,217.635
c-31.017,0-31.017-64.507-62.034-64.507
s-31.017,185.701-62.034,185.701
c-31.015,0-31.015-274.316-62.031-274.316
c-31.014,0-31.014,175.276-62.029,175.276
c-31.013,0-31.013-97.737-62.026-97.737;
M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200"
dur="5s"
repeatCount="indefinite"/>
</path>
</svg>

Strange behaviour of dasharray property in a SVG circle

I'm trying to create an infinite animation loop of an SVG circle.
I want to create 12 equal pieces and separate it by some gap.
To calculate value of circle pieces I used k coefficient from an table below
So I did 0,25782 * 160 (diameter of my circle) and I got: 41.2512 (it's should be a value of my pieces).
After that I created strokeDasharray prop via that value: 40 1.2512 I thought that it should be correct value.
Looks like it is but when I changed the strokedashOffset prop I saw some artifact at the right side. I don't know why it's happened and how I can fix it (and where I did an mistake)?
Thanks for any help.
Demo here (just change the strokedashOffset to a 408 value and you will see that issue).
https://jsfiddle.net/q8enje9o/
Here my pure svg code
<svg version="1.1" id="svgout_dasharray" baseProfile="full" width="500"
height="500" viewBox="0, 0, 500, 500" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid black">
<defs></defs>
<circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000" style="stroke-width: 30;stroke-dasharray: 40, 1.2512;stroke-dashoffset: 380;"></circle>
</svg>
Table of k coef. n - count of circle pieces
Here is the formula how you can calculate those coef. by itself
n - count of pieces
360 - 2*PI (a whole circle)
k - our coef. that we want to find
P.S. Here is a demo with the issue after update (Chrome latest & Windows 10)

The circumference of the circle / sum of the stroke-dasharray values needs to be an integer if you want evenly spaced lines and it isn't in your case.
So you probably want something like stroke-dasharray: 40, 1.8879; which should work with any stroke-dashoffset value.

Your question is a little confusing because you talk a lot about how you are calculating the dash array, but complain about things looking funny when you change the dash offset.
The circumference of a circle is 2 * PI * radius. If you want a n sections in your circumference, then the "dash + gap" in your dash array needs to sum to:
(2 * PI * radius) / n
so for 12 sectors, and a radius of 80, that value would be
(2 * PI * 80) / 12 = 41.8879
As Robert said, `stroke-dashoffset="40 1.8879" should work. And indeed it does.
<svg width="500" height="500" style="border: 1px solid black">
<circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000"
style="stroke-width: 30;stroke-dasharray: 40 1.8879;"/>
</svg>
Now you also talk about dash offset. I don't know why you want to change the dash offset. I guess you are trying to make the dashes rotate around the circumference of something. Is that right?
If so, then that should work - as long as you are accurate with your dash array values. See below.
<svg width="500" height="500" style="border: 1px solid black">
<circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000"
style="stroke-width: 30;stroke-dasharray: 40 1.8879; stroke-dashoffset: 408;"/>
</svg>

Stretching path based on character positions in text element

I'm writing a document in HTML5 with included SVG (actually ePub3), and I wanted to have a path in the SVG going from one character position in a text element to another. I found a way to do it, but it seems like a particularly awkward way, and I am wondering if anyone has any tips for improving it.
A bit more context: the particular illustration is to demonstrate how multiplication by integer powers of 10 shifts the decimal point around in decimal representations of numbers (particularly for converting between percentages and decimal representations, multiplying or dividing by 100). So I want the decimal number in a text element, and an arrow (specified as a path element with an arrowhead marker on one end) under it showing the shift of the decimal point from one position to another. But I want to do in in a general enough way that the arrow stretches for me if I need to change the font size or add digits between the start and stop positions of the arrow.
Here is what I came up with:
<svg id="shift" height="40" width="85">
<defs>
<marker id="arrowhead" markerWidth="6" markerHeight="6" refX="3" refY="0" >
<path d="M 0 6 L 3 0 6 6" stroke="black" fill-opacity="0" rotate="90"/></marker>
</defs>
<text id="fullstring" x="0" y="15" fill="black" font-family="serif" font-size="100%">10<!--
--><tspan id="firstdec" fill="blue">.</tspan>0000<tspan id="seconddec" fill="red">.</tspan>00</text>
<path id="decarrow" stroke="black" fill="white" stroke-width="1" d=""
style="marker-end: url(#arrowhead);"/>
<script type="text/javascript"><![CDATA[
var arrowpath = document.getElementById("decarrow");
var firstdecbox = document.getElementById("firstdec").getExtentOfChar(0);
document.getElementById("fullstring").setAttribute("y",""+firstdecbox.height);
document.getElementById("shift").setAttribute("height",""+(1.4*firstdecbox.height+15));
document.getElementById("shift").setAttribute("width", ""+document.getElementById("fullstring").getComputedTextLength());
var seconddecbox = document.getElementById("seconddec").getExtentOfChar(0);
var startx = firstdecbox.x+firstdecbox.width/2;
var starty = firstdecbox.y+firstdecbox.height;
var stopx = seconddecbox.x+seconddecbox.width/2;
var stopy = seconddecbox.y+seconddecbox.height;
var bendheight = 15;
arrowpath.setAttribute("d", "M "+startx+" "+starty+" L "+ startx+" "+(starty+bendheight)+" "+stopx+" "+(stopy+bendheight)+" "+stopx+" "+stopy);
]]></script>
</svg>
I can't help thinking that there must be a better way to do this. What I really want is a way to specify a path with starting point and ending point based on character positions in a text element. Is there such a way to specify path data relative to character positions? Or have I really stumbled my way onto the best available option?

Double arc shape with CSS jquery or javascript

How can I create an arc shape like this:
With CSS or jquery or javascript

You don't even need CSS/JS to draw this. Just use an <svg> element.
<svg width="270" height="120">
<path
d="M 49.155517,102.32765 C 127.54837,40.541934 209.51266,103.2205 209.51266,103.2205 l 0,0 C 259.33409,50.363364 259.15552,50.363364 259.15552,50.363364 126.68749,-56.114356 2.1861831,50.204194 2.1861831,50.204194 z"
stroke-width="3"
stroke="#A5423A"
fill="none"
/>
</svg>

You could use SVG for this. There is an arc path command which you could use.
As your comment states, you want to place content inside the arc and you want them to rotate.
Content like text or image could be placed inside the svg.
Rotation can be achieved with transform=rotate(..).
If you want to do more animations with SVG you could have a look at D3.js. If you just want to create some arcs, you possibly can do the math on your own for computing the SVG path string.

#AlliterativeAlice is correct.
But for this shape I would use two arcs instead of a lot of C paths.
I also prefer to use relative paths instead of absolute one.
So my solution used arcs and lines instead of only Bezier Curves.
<svg width="300px" height="300px" viewBox="0 0 100 100">
<path d="m 10,60
a 50 50 0 0 1 80,0
l -10,10
a 40 40 0 0 0 -60 0Z" stroke-width="1" stroke="#A5423A" fill="none" />
</svg>

SVG Scaling and Coordinates

This is my first SVG project, and I’m not a programmer, but I dabble in interactive infographics. My previous experience in this area comes from working with ActionScript.
I’m using plain SVG (no Raphael, D3, etc.) and trying to create an interactive barchart. After some initial difficulty with the SVG coordinate system and scaling, I found some code online that handles the postscaling translation:
<text x="x_coord0" y="y_coord0" transform="scale(x_scale, y_scale) translate(-x_coord0*(x_scale-1)/x_scale, -y_coord0*(y_scale-1)/y_scale)" …>text</text>
And I converted it into this JavaScript:
var translationfactor = ((0 - y_position)*(y_scalefactor - 1) / y_scalefactor);
var matrix = "scale(1," + y_scalefactor + ") translate(0," + Number(translationfactor) + ")";
targetbar.setAttribute("transform", matrix);
The problem is that I need the bars “translated” back to the chart’s baseline, not the original locations of their topmost points. Currently the correctly scaled bars are hugging the top of the chart:
http://billgregg.net/miscellany/upsidedown-barchart.png
I’ve tried several fixes, including plugging the bars’ ”missing height” into translationfactor (the bars start out the full height of the chart and get scaled down dynamically). Nothing has worked. Part of my problem is that, besides being new to SVGs, I can stare at that code all day and my brain still can’t parse it. Multiplying negative numbers is too abstract and at a fundamental level I just don’t “get” the math, which of course makes modifying the code difficult.
My questions:
(1) What’s the fix for the code above to position the bars back on the baseline of the chart?
(2) Is there a more transparent, more pedestrian way of accomplishing the translation? My first thought along these lines was that if a bar’s height is reduced to 40% of its original value, then multiplying the original Y coordinate value by 250% should reset the bar to its original location (at least its topmost point), but that doesn’t seem to work.
(3) Is there a way to set a bar’s point of origin to its bottom? In Flash it’s possible, though as far as I know it’s a manual, not a programmatic task.
(4) Is there a method similar to .localToGlobal() in ActionScript that would allow me to avoid having to mess with the local coordinate system at all?

Behind the scenes there is matrix math going on and it can be hard to get your head around the pre and post multiplication of arrays.
It's not entirely clear what you are trying to achieve, but reading between the lines, it sounds like you are wanting to provide graph coordinates in their raw(ish) form and have the SVG scale and position them for you(?)
If that's the case, then I think the solution is simpler than what you think.
Assuming I'm right, we'll start with something that looks like this:
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="">
<rect x="0" width="1" height="5" fill="red"/>
<rect x="1" width="1" height="11" fill="green"/>
<rect x="2" width="1" height="12" fill="orange"/>
<rect x="3" width="1" height="8" fill="blue"/>
</g>
</svg>
Where x is obvious and the bar length is in height. y defaults to 0, so we don't need it here.
You basically want to know what goes in the transform to scale and position the bars on your page. The fact that your graph is "upside-down" helps a little. Because the origin in an SVG is at the top left.
First apply a scale. Let's make the bars 20 pixels wide, and scale the lengths up by 10.
<g transform="scale(20,10)">
Next you want to position the graph on the page. Let's put the top-left corner at (40,40).
In SVG the transformations are concatenated in order (post-multiplied) so in order for the translation to be what you specify and not be multiplied by the scale, you should put it first.
<g transform="translate(40,40) scale(20,10)">
So the final SVG looks like this:
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(40,40) scale(20,10)">
<rect x="0" width="1" height="5" fill="red"/>
<rect x="1" width="1" height="11" fill="green"/>
<rect x="2" width="1" height="12" fill="orange"/>
<rect x="3" width="1" height="8" fill="blue"/>
</g>
</svg>
The above has been simplified by assuming you have already subtracted the values from your base 20%. If you wanted to keep the pure raw values, it's possible, but things get a bit trickier. You would need to either tinker with both the y and height value of each bar, or use clipping to hide the part of the bar above 20%.
For "right way up"/normal graphs. All you need to do is make the y scale negative and translate the graph so that the bottom-left is where you want it.
<g transform="translate(40,140) scale(20,-10)">
Hope this helps.