Inkscape.org
Beginners' Questions PathLength support in Inkscape SVG?
  1. #1
    Ravi Arora Ravi Arora @PhantomzBack

    According to W3 SVG 1.1 specification, SVGs should support a pathLength attribute, where the user can specify the stroke length in terms of his unit, and use them for properties like stroke-dashoffset, stroke-dasharray.
    https://www.w3.org/TR/SVG11/paths.html#PathLengthAttribute

    Β 

    However, it doesn't seem like Inkscape supports this. I would like to know when support for this would be added in the Inkscape renderer. It doesn't seem too hard of a job to do, Firefox's implementation seems like a suitable balance between flattening paths and calculating.

    Thanks,Β 
    Regards

  2. #2
    inklinea inklinea @inklinea⛰️

    I'm not sure that pathlength as an attribute is widely used in the world of SVG. Not everything in the specification really reaches the mainstream.

    Until recently it wasn't supported by some browsers such as Safari.

    If you want to control dashes, it might be a better idea to just make some simple classes - like .dashPath1 , .dashPath2 and assign them to objects in the Object>Selectors and css window.

  3. #3
    Ravi Arora Ravi Arora @PhantomzBack
    inklinea

    I'm not sure that pathlength as an attribute is widely used in the world of SVG. Not everything in the specification really reaches the mainstream.

    Β 

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
       xmlns="http://www.w3.org/2000/svg"
       width="1920"
       height="1080"
       viewBox="0 0 1920 2160"
       version="1.1"
       id="svg8">
      <g id="layer1">
        <circle pathLength="100" cx="960" cy="1080" r="500" fill-opacity="0" id="circleObjV" stroke-width="40" stroke="#9400D3" stroke-dasharray="50,50" stroke-dashoffset="50"/>
        <circle pathLength="100" cx="960" cy="1080" r="540" fill-opacity="0" id="circleObjI" stroke-width="40" stroke="#4B0082" stroke-dasharray="50,50" stroke-dashoffset="50"/>
        <circle pathLength="100" cx="960" cy="1080" r="580" fill-opacity="0" id="circleObjB" stroke-width="40" stroke="#0000FF" stroke-dasharray="50,50" stroke-dashoffset="50"/>
        <circle pathLength="100" cx="960" cy="1080" r="620" fill-opacity="0" id="circleObjG" stroke-width="40" stroke="#00FF00" stroke-dasharray="50,50" stroke-dashoffset="50"/>
        <circle pathLength="100" cx="960" cy="1080" r="660" fill-opacity="0" id="circleObjY" stroke-width="40" stroke="#FFFF00" stroke-dasharray="50,50" stroke-dashoffset="50"/>
        <circle pathLength="100" cx="960" cy="1080" r="700" fill-opacity="0" id="circleObjO" stroke-width="40" stroke="#FF7F00" stroke-dasharray="50,50" stroke-dashoffset="50"/>
        <circle pathLength="100" cx="960" cy="1080" r="740" fill-opacity="0" id="circleObjR" stroke-width="40" stroke="#FF0000" stroke-dasharray="50,50" stroke-dashoffset="50"/>
      </g>
    </svg>

    The above SVG uses pathLength and the results of different renderers are these:

    1. When path length is supported:
    2. When pathLenght is not supported:

    Β 

    Β 

    Β 

    Β 

    Β 

    To create an image like the first one, the user would have to manually use all properties according to the circumference which is 2pi r^2, but that is for the lucky case of a circle. For something like a more complex path, he probably can't even calculate them. I think this feature is crucial

Inkscape Inkscape.org Inkscape Forum Beginners' Questions PathLength support in Inkscape SVG?