12

次のような defs-section を使用して、SVG で線形グラデーションを使用できます。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>

defs-section なしで線形グラデーションを使用できますか? 私はこのようなものを見つけます：

<rect style="fill:lineargradient(foo)">
4

2 に答える 2

7

<defs>構造化の目的でのみ必要であり、その中の要素は表示されませんが、グラデーションは形状または別の要素に適用された場合にのみ表示されるため、ドキュメントの任意の場所で定義できます.

ただし、正しい構文に固執する必要があります。

<rect style="fill:url(#myLinearGradient1)" ... />
于 2011-10-07T20:19:19.197 に答える