Feature Request

pathLength is a great attribute, very useful when animated elements which it used to scale distances.

The pathLength attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathLength/(computed value of path length).

This can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. Basically, all computations that require the length of the path. stroke-dasharray, for example, will assume the start of the path being 0 and the end point the value defined in the pathLength attribute.

Doc: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength

Why it is needed

I wanted to animate a Circle using dasharray and dashoffset, easily doable using pathLength on web, but more hard on RN. As I'm not aware of the exact path length of the circle, how much should the animation goes to?

Apr 07 '22 14:04 HugoGresse

Having pathLength would be absolutely wonderful! It really makes the job of messing with varied lengths much easier.

May 20 '22 18:05 paulocf92

Still no response. pathLength is a very important tool. Here is an example of how you can't do without the pathLength property.

      <Svg fill="none" viewBox="0 0 118 118">
        <Path
          fill="none"
          stroke={theme.colors["primary-1-200"]}
          strokeWidth={9}
          strokeLinecap="round"
          d="M17.5,94.2a54.4,54.4 0 1,1 83,0"
        />
        <Path
          fill="none"
          pathLength={100}
          stroke={theme.colors["brand-color-2-500"]}
          strokeWidth={9}
          strokeLinecap="round"
          strokeDasharray={progressValue}
          strokeDashoffset={1000}
          d="M17.5,94.2a54.4,54.4 0 1,1 83,0"
        />
      </Svg>