Function setClipPath

src/components/shapes/draw.js:229–256

(shapePath, gd, shapeOptions)

}

function setClipPath(shapePath, gd, shapeOptions) {
    // note that for layer="below" the clipAxes can be different from the
    // subplot we're drawing this in. This could cause problems if the shape
    // spans two subplots. See https://github.com/plotly/plotly.js/issues/1452
    //
    // if axis is 'paper' or an axis with " domain" appended, then there is no
    // clip axis

    const xref = shapeOptions.xref;
    const yref = shapeOptions.yref;

    // For multi-axis shapes, create a custom clip path from axis bounds
    if (Array.isArray(xref) || Array.isArray(yref)) {
        const clipId = 'clip' + gd._fullLayout._uid + 'shape' + shapeOptions._index;
        const rect = getMultiAxisClipRect(gd, xref, yref);

        Lib.ensureSingleById(gd._fullLayout._clips, 'clipPath', clipId, function (s) {
            s.append('rect');
        })
            .select('rect')
            .attr(rect);

        Drawing.setClipUrl(shapePath, clipId, gd);
    } else {
        const clipAxes = (xref + yref).replace(/paper/g, '').replace(/[xyz][0-9]* *domain/g, '');
        Drawing.setClipUrl(shapePath, clipAxes ? 'clip' + gd._fullLayout._uid + clipAxes : null, gd);
    }
}

function getMultiAxisClipRect(gd, xref, yref) {
    const gs = gd._fullLayout._size;