SVG のテキストに対して正確なレイヤー効果を実現しようとしています。以下の私の現在のソリューションは、グループ要素をコピーして貼り付け、内部のテキスト要素をそれぞれの x 座標と y 座標を修正するだけです。別のソリューションから、形状の定義と再利用と変換を見ました。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 960 640" style="background-color:#def">
<g style="font-family: Arial Black; font-weight: bold;" fill="rgba(244, 164, 96, 0.45)">
<text text-anchor="middle" x="480" y="610" font-size="160px">♥</text>
<text x="95" y="265" font-size="160px">PASSION</text>
<text x="395" y="345" font-size="80px">FOR</text>
<text x="135" y="485" font-size="160px">PEOPLE</text>
</g>
<g style="font-family: Arial Black; font-weight: bold;" fill="#def">
<text x="439" y="601" font-size="160px">♥</text>
<text x="99" y="261" font-size="160px">PASSION</text>
<text x="399" y="341" font-size="80px">FOR</text>
<text x="139" y="481" font-size="160px">PEOPLE</text>
</g>
<g style="font-family: Arial Black; font-weight: bold;" fill="orange">
<text x="440" y="600" font-size="160px">♥</text>
<text x="100" y="260" font-size="160px">PASSION</text>
<text x="400" y="340" font-size="80px">FOR</text>
<text x="140" y="480" font-size="160px">PEOPLE</text>
</g>