小编Izn*_*ood的帖子

我正在使用一个看起来像这样的SVG元素:(抱歉,我必须将其作为链接发布而不是作为图片,但作为新用户,我没有权限发布图像)

页面中间带圆角的边框,但删除边框的位置将插入页眉/页脚.用户指定的文本将插入页眉,页脚和框架本身.矩形被绘制在另一个背景(图片,另一个带有颜色的矩形等)的顶部.我需要找到一种方法来保持原始背景,仅绘制边框的一部分并将文本放在原始背景的顶部.

我想出了这个解决方案:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 620 1100" preserveAspectRatio="xMidYMid meet">
    <defs>
        <!--Define some texts-->
        <text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;">THIS IS MY HEADER</text>
        <text id="text2" x="525" y="1010" style="text-anchor:end;font-size:30px;">MY TEXT HERE</text>

        <mask id="Mask1">
            <!--draw the entire screen-->
            <rect x="0" y="0" width="620" height="1100" style="fill:white;" />
            <!--Mask out the two rectangles where text is to be placed-->
            <rect x="300" y="980" width="350" height="50" style="fill:black;" />
            <rect x="90" y="90" width="350" height="40" style="fill:black;" />
        </mask>
    </defs>

    <!--The …