mask SVG path by another path - animation

Question

I have SVG path (solid) which I want to mask by other path (dashed). I have this CSS
.dashed{
stroke-dasharray: 5;
}
.path {
stroke-dasharray: 852;
stroke-dashoffset: 852;
animation: dash 4s 1s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
and the SVG like this
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<g transform="scale(1.7)">
<path class="path" fill="none" stroke="#e31f1a" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.0" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>
</g>
<g transform="scale(1.71)">
<path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>
</g>
</svg>
The paths are the same. The reason why I don't use just dashed one is the animation (see CSS part) where I want to do effect which will draw the dashed line.
Using mask image (with the dashed line inside)
mask-image: url(mask.svg);
did not work for me. Would you know the way?

Answer 1

You don't need to use mask-image. That is for when you want to mask an HTML element with a mask.
You should just use an SVG <mask> element. And animate the path in that.
.dashed {
stroke-dasharray: 5;
}
.path {
stroke-dasharray: 226;
stroke-dashoffset: 226;
animation: dash 4s 1s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="612px" height="792px" viewBox="0 0 612 792">
<defs>
<mask id="mymask">
<path class="path" fill="none" stroke="#fff" stroke-width="2"
d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>
</mask>
</defs>
<g transform="scale(1.71)">
<path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"
mask="url(#mymask)"
d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>
</g>
</svg>