CSS marker-mid转折点标记点效果示意实例页面

展示

代码

• HTML：

  <svg width="0" height="0" style="position: absolute;">
      <defs>
          <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="4" refY="4">
              <circle cx="4" cy="4" r="2.5" fill="#000">
          </marker>
          <marker id="markerArrow" markerWidth="12" markerHeight="12" refX="2" refY="6" orient="auto">
              <path d="M2,3 L2,10 L8,6 L2,3" fill="#000">
          </marker>
      </defs>
  </svg>
  
  <svg>
      <polyline points="20,100 50,60 80,80 110,20 140,60 170,40 200,90">
  </svg>

• CSS：

  polyline {
      fill: none;
      stroke: red;
      stroke-width: 2px;
      marker-mid: url(#markerCircle);
  }