在替代点中为折线创建 SVG 标记。（阶梯曲线）答案

【问题标题】：Creating SVG markers for PolyLine in alternative points. (Step curve)在替代点中为折线创建 SVG 标记。（阶梯曲线）
【发布时间】：2013-10-27 02:53:14
【问题描述】：

我正在创建一条多段线作为阶梯曲线。我希望将标记放置在重要点上，而不是放置在台阶线的每一端。我如何做到这一点？

            <polyline points="0,0 140,125 160,140 180,220 220,240 300,280 400,450    500,500 900,900"
                      style="fill: none;" 
                      stroke="blue"
                      stroke-width="5" 
                      marker-start="url(#point)" 
                      marker-mid="url(#point)" 
                      marker-end="url(#point)"
                      clip-path="url(#clip)" />
            <defs>
                <marker id="point" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="10" markerheight="10"
                    orient="auto" markerUnits = "userSpaceOnUse">
                    <circle cx="5" cy="5" r="1" stroke="red" stroke-width="1" fill="black">
                    </circle>
                </marker>
            </defs>
        </g>

我不想使用两个不同的 SVG 折线来创建正确的标记。

【问题讨论】：

标签： javascript svg markers polyline

【解决方案1】：

除了marker-start、marker-mid 和marker-end 提供的粗略控制之外，没有办法控制一条线上的哪些点获得标记。

建议对 SVG2 进行更精细的控制，但现在对您没有帮助。

您唯一的解决方案是为您的每个兴趣点在文件中添加单独的元素。

【讨论】：