私は次のような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 original background (here a rect with a fill color, but could also be an image)-->
<rect x="0" y="0" width="620" height="1100" style="fill:#f0ffb6"/>
<!--Draw the rectangle but applying the mask-->
<rect x="100" y="100" rx="20" ry="20" width="420" height="900" mask="url(#Mask1)" style="fill:none;stroke:green;stroke-width:5"/>
<!--Draw the text-->
<use xlink:href="#text1" fill="black" stroke="black" stroke-width="1" />
<use xlink:href="#text2" fill="black" stroke="black" stroke-width="1" />
<text x="200" y="200">This text goes into the border</text>
</svg>
私の問題は、マスクの最後の 2 つの四角形 (境界線を描画しない四角形) の幅が静的でなければならないことです。ユーザーがテキスト幅を変更した場合、ユーザーはテキストの新しい幅も計算し、これら 2 つの長方形を更新する必要があります。
テキスト自体とまったく同じ幅のブロックをマスクして、マスク内の四角形をスキップする方法はありますか。それとも、これがそのようなマスクを作成する唯一の方法ですか? このレイアウトを実現するためのより優れた直感的な方法を「そこにいる」人がいる場合は、ぜひご連絡ください。
ご協力いただきありがとうございます。