javascript - SVG D Path With Numbers -
i not able figure out how make path of circle go in middle. have example on jsfiddle.
basically, how make black path go in middle? path (2nd in svg tag):
https://jsfiddle.net/6e1z6xkq/
<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 end result this:
you want below (although observe svg source verbose. can same result single move , arc drawing command green stroke & appropriate stroke width. , there should no need transform - looks 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>
Comments
Post a Comment