css transition duration doesn't work with vector-effect: non-scaling-stroke

Question

I have two svgs with different viewports. I use vector-effect: non-scaling-stroke to make stroke-width the same for both svgs.

The problem is that when I use vector-effect: non-scaling-stroke, duration of css transition doesn't work.

#circleStroke {
      transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
        stroke 800ms;
      stroke-dashoffset: 337.6;
      stroke-dasharray: 337.6 339.6;
    }

Example with working animation without vector-effect: non-scaling-stroke rule.

document.getElementById("pause").addEventListener("click", function( event ) {
    var element = document.getElementById("circleStroke");
    if (element.classList.contains("play")) {
    	element.classList.remove("play");
    } else {
    	element.classList.add("play");
    }
  }, false);

.fst-wrapper, .snd-wrapper{
  width: 90px;
  height: 90px;
}

#circleStroke {
  fill: none;
  paint-order: 'markers fill stroke';
  stroke-linecap: 'square';
  stroke-linejoin: 'round';
  stroke: black;
  stroke-width: 2;
}

#circleStroke {
  transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
    stroke 800ms;
  stroke-dashoffset: 337.6;
  stroke-dasharray: 337.6 339.6;
}

#circleStroke.play {
  stroke-dashoffset: 0;
}

.vert-line{
  fill: none;
  stroke-width: 2;
}

#line2{
  stroke-width: 2;
}

.vert-line, #circleStroke, #line2 {
  /* vector-effect: non-scaling-stroke; */
}

<div class="fst-wrapper">
<svg
      id="pause"
      viewBox="-20 -20 140 140"
    >
      <g id="svgG">
        <path
          id="circleStroke"
          strokeDasharray="337"
          strokeDashoffset="5"
          d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
        />
        <path
          id="line2"
          d="M 38 30 L 70 50 L 38 70"
          rx="10"
          ry="10"
        />
      </g>
    </svg>
    </div>
    <div class="snd-wrapper">
    <svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
            <path
              d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
              stroke='black'
            />
          </svg>
          </div>

Animation doesn't work with vector-effect: non-scaling-stroke rule.

document.getElementById("pause").addEventListener("click", function( event ) {
    var element = document.getElementById("circleStroke");
    if (element.classList.contains("play")) {
    	element.classList.remove("play");
    } else {
    	element.classList.add("play");
    }
  }, false);

.fst-wrapper, .snd-wrapper{
  width: 90px;
  height: 90px;
}

#circleStroke {
  fill: none;
  paint-order: 'markers fill stroke';
  stroke-linecap: 'square';
  stroke-linejoin: 'round';
  stroke: black;
  stroke-width: 2;
}

#circleStroke {
  transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
    stroke 800ms;
  stroke-dashoffset: 337.6;
  stroke-dasharray: 337.6 339.6;
}

#circleStroke.play {
  stroke-dashoffset: 0;
}

.vert-line{
  fill: none;
  stroke-width: 2;
}

#line2{
  stroke-width: 2;
}

.vert-line, #circleStroke, #line2 {
  vector-effect: non-scaling-stroke;
}

<div class="fst-wrapper">
<svg
      id="pause"
      viewBox="-20 -20 140 140"
    >
      <g id="svgG">
        <path
          id="circleStroke"
          strokeDasharray="337"
          strokeDashoffset="5"
          d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
        />
        <path
          id="line2"
          d="M 38 30 L 70 50 L 38 70"
          rx="10"
          ry="10"
        />
      </g>
    </svg>
    </div>
    <div class="snd-wrapper">
    <svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
            <path
              d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
              stroke='black'
            />
          </svg>
          </div>

Answer 1

I think the problem here doesn't lie with the transition duration. If, for example, you change the timing function from cubic-bezier() to linear you'll see that the duration value is honoured in both states. The issue therefore may lie with the bezier-values for the un/toggled state of #pause > #circleStroke.

Adding a CSS transition to #circleStroke.play may be one way of addressing this, and while something like this...

...

#circleStroke {
    transition: all 800ms cubic-bezier(0, 0.25, 0.01, 0.99);
    stroke-dashoffset: 337.6;
    stroke-dasharray: 337.6 339.6;
}

#circleStroke.play {
    transition: all 800ms cubic-bezier(0.99, 0.01, 0.25, 0);
    stroke-dashoffset: 0;
}

...

... may be a little extreme it does show that each state of #pause > #circleStroke can operate to it's own transition timing function.

I generally prefer to do this sort of thing with CSS animate rather than transitions - something I picked up a while back from Jake Archbald's blog here.

---

Additionally, you can also use Element.classList.toggle('class') for your state-changing function...

document.getElementById("pause").addEventListener("click", function( event ) {
    document.getElementById("circleStroke").classList.toggle('play');
}, false);

... Not part of the question I know, but a little tidier nonetheless.

Hoped that helps :)