SVG: repeating markers through the line/path

Question

I'm trying to build svg-line (or path - doesn't matter) with repeating markers along it's entire length. What is the best way to implement it? There is a description of marker-pattern property on w3. It looks perfect but for some reason I can't get the correct result in my code. Furthermore, I don't see any markers, replicating the w3 example: https://jsfiddle.net/pLaukq8p/

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200">

    <marker id="DoubleDash" markerWidth="8" markerHeight="12" refX="0" refY="0"
            viewBox="-4 -6 8 12" markerUnits="userSpaceOnUse" orient="auto">
      <rect x="-3" y="-5" width="2" height="10"/>
      <rect x="1" y="-5" width="2" height="10"/>
    </marker>
    <marker id="SingleDash" markerWidth="4" markerHeight="12" refX="0" refY="0"
            viewBox="-2 -6 4 12" markerUnits="userSpaceOnUse" orient="auto">
      <rect x="-1" y="-5" width="2" height="10"/>
    </marker>

    <path d="M 50,100 S 100,132 150,86 200,173 250,76 300,81
                    350,136 400,87 450,166 500,87 550,96"
          stroke="deeppink" stroke-width="2" fill="none"
          marker-pattern="40 url(#DoubleDash) 40 url(#SingleDash)"/>
</svg>