2013年1月23日水曜日

Processing.jsでSVGのグラデーションは表示できない

<linearGradient id="grad1" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ff6347"/>
<stop offset="100%" stop-color="#f5deb3"/>
</linearGradient>
<path d="M40,10 l30,30 l-15,0 l0,60 l-30,0 l0,-60 l-15,0 l30,-30z" stroke="#ff6347" stroke-width="2" fill="url(#grad1)" />
上記のコードで、下図のようにSVGでグラデーションを表示できる。


ところが、Processing.js で上記のSVGを表示すると、グラデーションの部分が黒くなってしまう。


SVGをpngに変換して表示すると、グラデーションがきちんと現れる。


どうやら、Processing.jsでは、SVGのグラデーションは非対応のようである。

0 件のコメント:

コメントを投稿