6

私のページでは、多くの CSS3 グラデーションを使用しています。IE と Opera に SVG フォールバックを提供したいと思います。

CSS3 線形グラデーションの SVG フォールバックを作成するのは非常に簡単です。次のコードを使用します。

   <svg xmlns="http://www.w3.org/2000/svg">
     <linearGradient id="g" gradientTransform="rotate(90,.5,.5)">
       <stop stop-color="black" offset="0"/>
       <stop stop-color="white" offset="1"/>
     </linearGradient>
     <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
   </svg>

これは、次の css と同等です。

  background:-webkit-linear-gradient(black,white);
  background:   -moz-linear-gradient(black,white);
  background:     -o-linear-gradient(black,white);
  background:        linear-gradient(black,white);

CSS3 放射状グラデーションに関して言えば、状況は少し複雑になっています。次のようなCSS3ラジアルグラデーションに相当するSVGを作成する運がありません：

  background:-webkit-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
  background:   -moz-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
  background:     -o-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
  background:        radial-gradient(circle at 50% 10%,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);

これまでのところ、私はこれを思い付くことができました：

<svg xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="g">
    <stop stop-opacity=".3" stop-color="white" offset=".1"/>
    <stop stop-opacity="0" stop-color="white" offset=".9"/>
  </radialGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</svg>

しかし、それは私に異なる結果をもたらします。

CSS3 で元のグラデーションと同じグラデーションを作成するにはどうすればよいですか?

2 つのグラデーションのデモを次に示します: http://jsfiddle.net/QuMnA/

4

1 に答える 1

3

放射状グラデーションの属性cxと属性を指定する必要があります。cy

<svg xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="g" r="1" cx="50%" cy="10%">
    <stop stop-opacity=".3" stop-color="white" offset=".1"/>
    <stop stop-opacity="0" stop-color="white" offset=".9"/>
  </radialGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</svg>
于 2012-09-06T18:02:08.503 に答える