1

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">&#9829;</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">&#9829;</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">&#9829;</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>

4

1 に答える 1

3

目的の効果を得るには、defsセクション内で shape を定義し、それをuse要素から参照します。

したがって、サンプルドキュメントに相当するものは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     preserveAspectRatio="xMinYMin meet"
     width="100%" height="100%"
     viewBox="0 0 960 640"
     style="background-color:#def">
<defs>
  <g id="passion" style="font-family: Arial Black; font-weight: bold;">
    <text x="440" y="600" font-size="160px">&#9829;</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>
</defs>

<use xlink:href="#passion" transform="translate(-5,5)" fill="rgba(244, 164, 96, 0.45)" />
<use xlink:href="#passion" transform="translate(-1,1)" fill="#def" />
<use xlink:href="#passion" fill="orange" />
</svg>

ルート svg 要素で xlink 名前空間を定義することを忘れないでください。そうしないと、エラーが発生します。

于 2013-05-20T19:52:30.403 に答える