CSS marker-start/marker-end起止标记点效果示意实例页面

展示

代码

• 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">
          </marker>
          <marker id="markerArrow" markerWidth="12" markerHeight="12" refX="2" refY="6" orient="auto">
              <path d="M2,3 L2,10 L8,6 L2,3">
          </marker>
      </defs>
  </svg>
  
  <p>My Love <svg width="150" height="20" viewBox="0 0 150 20"><line x1="10" y1="10" x2="130" y2="10"></line></svg> Your Heart</p>

• CSS：

  line {
      stroke: red;
      stroke-width: 2px;
      marker-start: url(#markerCircle);
      marker-end: url(#markerArrow);
  }