I need to draw pattern along SVG path. I tried using SVG markers but there is a problem with their orientation along the path. Is there any alternative way to accomplish this? If yes, what should be my approach? The expected result is something like this-
In case anyone would search it and wouldn't want to use textPath mentioned in other answers, here's how this paricular chain pattern can be created using dashed lines. Many other patterns can be created in a similar way, especially if you incorporate filters (Edit: I created more examples here).
Here I use three dashed lines along the same path - two of them alternately create chain segments and the third one creates holes using mask.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<defs>
<path id="chain-path" d="M 50,50 C 50,150 250,150 250,50" fill="none" stroke-linecap="round"/>
<mask id="holes">
<!-- white everywhere = keep everything... -->
<rect x="0%" y="0%" width="100%" height="100%" fill="white"/>
<!-- ...except holes -->
<use href="#chain-path" stroke-width="4" stroke-dasharray="6 14" stroke-dashoffset="7" stroke="black"/>
</mask>
</defs>
<!-- segments whose hole is visible, with holes cut out using mask-->
<use href="#chain-path" stroke-width="8" stroke-dasharray="6 14" stroke-dashoffset="7" stroke="black" stroke-opacity=".8" mask="url(#holes)"/>
<!-- segments whose hole isn't visible -->
<use href="#chain-path" stroke-width="2" stroke-dasharray="12 8" stroke="black" stroke-opacity=".8"/>
</svg>
A slight disadvantege against textPath is that the individual segments bend along the line which is visible if the path is too curved.