您可以使用置换贴图使它们不规则（见下文），或者您可以找到一种带有字形的字体，并使用该字体沿着textPath使用文本，使其看起来像自定义的虚线。但您不能在正常路径中设置每个单独的虚线的样式。

<svg width="600px" height="400px">
  
  <filter id="custom-stroke">

    <feTurbulence baseFrequency= "0.02" type="turbulence" numOctaves="2"/>
    <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="15"/>
    <feMorphology operator="erode" radius="1"/>
    <feMorphology operator="dilate" radius="1" />
    
    <feGaussianBlur stdDeviation="1.5" />
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 11 -7" result="goo" />
  </filter>
  
  
  <g filter="url(#custom-stroke)">
  <path fill="none" stroke="blue" stroke-dasharray="10 10" stroke-width="8" d="M 10 10 a 100 80 0 0 1 100 40  200 300 0 0 0 200 100"/>
  </g>
</svg>

<animateMotion rotate="auto">旋转<path>上的SVG元素
我把我昨天的答案（见SO答案的解释），
我简化了它，添加了Michael的过滤器，并对过滤器设置进行了一些调整。

SVGMaven的问题：我们可以用JS得到每个“标记”的rotate="auto"值吗？

如果是这样的话，每个“标记”都可以进行自定义，以使其“* 曲线 *”更好
JSF中间文件：https://jsfiddle.net/WebComponents/7muns9La/

<svg-path-markers count="25" filter>
  <svg viewBox="0 0 500 300" style="background:pink;max-height:180px">
    <defs><g id="marker"><path fill="green" d="m0 -10q29 4 0 10a8 7 90 110-10z"/></g></defs>
    <filter id="F">
      <feTurbulence baseFrequency= "0.001" type="turbulence" numOctaves="1"/>
      <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="15"/>
      <feMorphology operator="erode" radius=".1"/><feMorphology operator="dilate" radius=".1" />
      <feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 11 -7"/>
    </filter>    
    <path fill="none" stroke="black" d="m50 20a10 10 90 00230 100c30-140-160 0-90 120 30 50 370 40 260-60" />
    <g id="markers"/>
  </svg>
</svg-path-markers>
<script>
  customElements.define("svg-path-markers", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // wait till innerHTML is parsed
        this.querySelectorAll("path").forEach( path => {
          let duration = "2"; // set to 0.00001 for instant display
          let count = ~~this.getAttribute("count");
          let filter = this.hasAttribute("filter") ? 'filter="url(#F)"' : '';
          let id = path.id || (path.id = this.localName + Math.random()*1e9);
          let marker = dist => 
            `<use href="#marker" ${filter}>
              <animateMotion dur="${duration}" fill="freeze"calcMode="linear" 
                             rotate="auto" keyPoints="0;${dist}" keyTimes="0;1">
                <mpath href="#${id}"/></animateMotion></use>`;
          this.querySelector("#markers").innerHTML =Array(count).fill(0)
                                        .map((_,i) => marker(i*(1/(count-1)))).join("");
        } )
      })}})
</script>