如何裁剪SVG中穿过起始标记的红色路径？

可以通过两种简单方法实现需求，让红色路径不穿过左侧的透明描边矩形标记：

方法1：调整Marker的参考点（refX） #

通过设置marker的refX属性，让路径线条从标记的边缘开始绘制：

<svg width="400" height="250">
    <defs>
    <!-- refX设为矩形右侧坐标：8（x起始）+40（宽度）=48 -->
    <marker id="hollowRect" orient="auto" overflow="visible" markerUnits="userSpaceOnUse" refX="48">
        <rect stroke="#FC5BAC" fill="transparent" width="40" height="40" y="-20" x="8" stroke-width="16"></rect>
    </marker>
    <marker id="circle" orient="auto" overflow="visible" markerUnits="userSpaceOnUse">
        <circle stroke="black" fill="#FC5BAC" transform="rotate(180)" cx="30" r="30"></circle>
    </marker>
    </defs>
    
    <path d="M 0,30 L 300,30" stroke="red" marker-start="url(#hollowRect)" marker-end="url(#circle)" stroke-width="20" fill="none" />    
</svg>

原理：refX定义了标记与路径端点的对齐位置，将其设为矩形右侧坐标后，红色路径会从标记的边缘开始延伸，不会穿过透明矩形区域。

方法2：直接调整路径起始点 #

计算出标记矩形的右侧位置，修改path的起始坐标，让路径本身避开标记区域：

<svg width="400" height="250">
    <defs>
    <marker id="hollowRect" orient="auto" overflow="visible" markerUnits="userSpaceOnUse">
        <rect stroke="#FC5BAC" fill="transparent" width="40" height="40" y="-20" x="8" stroke-width="16"></rect>
    </marker>
    <marker id="circle" orient="auto" overflow="visible" markerUnits="userSpaceOnUse">
        <circle stroke="black" fill="#FC5BAC" transform="rotate(180)" cx="30" r="30"></circle>
    </marker>
    </defs>
    
    <!-- 起始点改为48，与矩形右侧对齐 -->
    <path d="M 48,30 L 300,30" stroke="red" marker-start="url(#hollowRect)" marker-end="url(#circle)" stroke-width="20" fill="none" />    
</svg>

原理：直接让路径从标记矩形的右侧开始绘制，从根源避免路径穿过标记区域。

注：原代码中圆形标记的stroke="circle"是无效值，已修正为stroke="black"。

内容的提问来源于stack exchange，提问作者akronnorka