Analytics Project SVG Path

Question

I am not able to figure out how to make path of a circle to go in the middle. I have an example on jsfiddle.

Basically, how do we make this black path go in the middle? This is the path (2nd in svg tag):

[![enter image description here][1]][1]

<div align="center">
<div class="circleDraw">
<svg width="116" height="100">
  <g transform="translate(58,58)">
    <path d="M-44.430577700900734,37.281681361819274A58,58 0 1,1 44.43057770090073,37.28168136181928L35.23804438347299,29.568230045580812A46,46 0 1,0 -35.238044383472996,29.568230045580805Z" style="fill: rgb(100, 150, 100);">
    </path>
    <path d="M-90.430577700900734,97.281681361819274A58,58 0 0,1 -96.07604799105425,3.22779870395063L-96.54307254462923,7.939288627271193A46,46 0 0,0 -35.238044383472996,29.568230045580805Z" style="fill: rgb(255, 1, 1);" width="15px" height="20px">
    </path>
</svg>
</div>
</div>

I updated my answer, I believe this is what you are asking for. — Joe B., Jul 28 '17 at 01:40
@JoeB. No sorry you were right before. I want to make this path go in the middle ( ). Not create a circle — user2501165, Jul 28 '17 at 02:14
I got the gist. If you could be more descriptive of how it's positioned in the middle I can provide a better example. But my answer should get you most of the way there. — Joe B., Jul 28 '17 at 02:25
Oh sorry @JoeB. I have updated the question with end result with the picture as well. — user2501165, Jul 28 '17 at 02:40
Oh that's great, i love it. Is it possible to make it static or to leave at a certain position? Right now it changes dynamically when you hover over. — user2501165, Jul 28 '17 at 04:40
Yeah you set the `stroke-dashoffset` in the css to any number between 285 and 515 (for the example you provided) — Joe B., Jul 28 '17 at 04:42
What if it's already in the half of the circle (starting point), how do we move it forward? — user2501165, Jul 28 '17 at 05:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150365/discussion-between-joe-b-and-user2501165). — Joe B., Jul 28 '17 at 05:11

Joe B. · Answer 1 · 2017-07-28T04:52:37.817

Positioning and animating a line within the svg

It was easiest to go into Illustrator to create a stroke path that matched your arc.

From there it is just a matter of animating the svg with the following css. For any point along the path you can set the stroke-dashoffset from 285 to 515 (for this example.

  .speed{
   stroke-dasharray: 260px;
   stroke-dashoffset: 285;
  }

To Animate The stroke with CSS

You can apply a transition of the stroke-dataoffset to the complete path (css-tricks has a good article on this), like so:

 svg:hover .speed{
    stroke-dashoffset: 515;
    transition: 1s ease;
 }

Positioning a circle in the middle of your svg

I apologize I misread the question initially. You will want to add a <circle></circle> svg tag with cx, cy, and r attributes. cx and cy are the positioning attributes and r is the radius. In this case cx and cy are set to zero and I've arbitrarily set the radius.

You can read more about basic svg shapes at MDN

Moving the red path to the middle

You can add transform: translate(x,y) to the appropriate path. 'x' and 'y' represent the x and y coordinates of the path. You can also add other attributes like rotate() and skew(). MDN has good explanations of this as well.

Also I noticed in your fiddle that you hadn't closed the <g> tag.

.speed {
  stroke-dasharray: 260px;
  stroke-dashoffset: 285;
  transition: 1s ease;
}

svg:hover .speed {
  stroke-dashoffset: 515;
  transition: 1s ease;
}

<div align="center">
  Hover over the first svg!
  <div class="circleClass">
    <svg width="116" height="100">
      <g transform="translate(58,58)">
        <path  d="M-44.430577700900734, 37.281681361819274A58, 58 0 1,1 44.43057770090073,37.28168136181928L35.23804438347299,29.568230045580812A46,46 0 1,0 -35.238044383472996,29.568230045580805Z" style="fill: rgb(100, 150, 100);"/>

        <path class="speed" d="M40.1,33.5l3.4-4.9c12.6-19,11.4-44.3-3.6-62.1C29.9-45.3,15.4-52,0-52c-12.2,0-24.1,4.3-33.4,12.2
                               c-20.4,17.1-24.4,46.8-10,68.5c0,0,2.3,4,3.3,5.1" stroke="red" fill="transparent" stroke-width="12"/>
      </g>
    </svg>
</div>
</div>

<div align="center">
  <div class="circleClass">
    <svg width="116" height="100">
      <g transform="translate(58,58)">
        <path d="M-44.430577700900734,37.281681361819274A58,58 0 1,1 44.43057770090073,37.28168136181928L35.23804438347299,29.568230045580812A46,46 0 1,0 -35.238044383472996,29.568230045580805Z" style="fill: rgb(100, 150, 100);">
        </path>
        <polygon points="2,2.50 0,-2.5 -40,30" style="fill:red;" />
      </g>
    </svg>
  </div>
</div>

<div align="center">

  <svg width="116" height="100">
    <g transform="translate(58,58)">
      <path d="M-44.430577700900734,37.281681361819274A58,58 0 1,1 44.43057770090073,37.28168136181928L35.23804438347299,29.568230045580812A46,46 0 1,0 -35.238044383472996,29.568230045580805Z" style="fill: rgb(100, 150, 100);">
      </path>
      <circle cx="0" cy="0" r="25"/>
    </g>
  </svg>
</div>

You can apply `transform: translate(x,y)` to the `` tag. I updated the snippet. I'm not sure how you want the exact positioning. It is in the "middle." But I imagine you're looking for something more specific. — Joe B., Jul 28 '17 at 02:20

score 0 · Answer 2 · answered Jul 28 '17 at 02:29

You want something like the below (although I would observe that your SVG source is verbose. You can get the same result from a single move and arc drawing command with a green stroke & appropriate stroke width. And there should be no need for a transform - this looks like a drawing tool export.)

          <div align="center">
            <div class="speedometer--points">
              <svg width="116px" height="100px">
                <g transform="translate(58,58)">
                  <path d="M-44.430577700900734,37.281681361819274A58,58 0 1,1 44.43057770090073,37.28168136181928 L35.23804438347299,29.568230045580812 A46,46 0 1,0 -35.238044383472996,29.568230045580805Z" fill="green">
                  </path>
              <path d="M -45 35 l 45 -45" stroke="red" stroke-width="5">
              </path>
              </g>
              </svg>
             </div>
        </div>

score 0 · Answer 3 · answered Jul 28 '17 at 18:56

Your task is complicated a little due to the fact that your green arc is not a simple little path arc that goes from left to right (or vice versa). It is actually a closed shape that defines the outside of the green shape. So it goes from left to right around the outer radius, then a little straight bit to the inner radius, and another arc back to the start.

It is possible to fill a green shape like that, in a meter like way, using a mask or a clipping path. However it is much simpler to just convert your green meter shape to a simple path that goes from left to right in one direction, and has a thick width.

If we do that, your SVG becomes, something like:

<div align="center">
<div class="circleDraw">
<svg width="116" height="100">
  <g transform="translate(58,58)">
    <! the green path converted to a simple one directional stroke -->
    <path d="M -39.8,33.4 A 52,52, 0, 1, 1, 39.8, 33.4"
          style="fill: none; stroke-width: 12; stroke: rgb(100, 150, 100);">
    </path>
  </g>
</svg>
</div>
</div>

Now that we've done that, we can use a really easy method to produce your black meter line.

What we do is make an exact duplicate of the green line (except black this time of course). Then we apply a dash array to the line that makes it on for 50% of the length and off for 50% of the length.

The length of our arc is 236 units. So we set the dash array to:

stroke-dasharray: 118 118

<div align="center">
<div class="circleDraw">
<svg width="116" height="100">
  <g transform="translate(58,58)" style="fill: none; stroke-width: 12;">
    <! the green path -->
    <path d="M -39.8,33.4 A 52,52, 0, 1, 1, 39.8, 33.4"
          style="stroke: rgb(100, 150, 100);">
    </path>
    <!-- the black path -->
    <path d="M -39.8,33.4 A 52,52, 0, 1, 1, 39.8, 33.4"
          style="stroke: black; stroke-dasharray: 118 118;">
    </path>
  </g>
</svg>
</div>
</div>

If you need to change the meter to read something other than 50%, then you need to adjust the value of the stroke-dasharray. Just make sure the two values add up to (at least) 236.

This other question shows how to update the meter with Javascript if that's what you ultimately want to do.

Analytics Project SVG Path

3 Answers3

Positioning and animating a line within the svg

To Animate The stroke with CSS

Positioning a circle in the middle of your svg

Moving the red path to the middle