0

Raphael で色を90-#7ADADD-#338A93パス上に設定すると、グラデーションになります。次に、要素を調べると、そのfillプロパティが次のように設定されていることがわかりますurl(#490-_7ADADD-_338A93)。

変えようとする90-#7ADADD-#338A93と黒くなる。問題は、グラデーションの色を外部から変更する方法です。url(#490-_7ADADD-_338A93)元の からこれを計算するにはどうすればよい90-#7ADADD-#338A93ですか?

4

1 に答える 1

1

完全な SVG ソースを見ると、次のようになります。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="490-_7ADADD-_338A93" x1="0%" y1="0%" x2="100%" y2="0%">
      ....
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#490-_7ADADD-_338A93)" />
</svg>

url(...)パーツは、実際には で定義されたグラデーションへの参照ですdefs。存在しないものへの参照を変更すると、黒い塗りつぶしで表示されます。

Raphael で行うべき論理的なことは、グラデーション操作をライブラリ内に保持することです。もしあなたがそうするなら...

path.attr({"fill": "90-#fff-#000"})
path.attr({"fill": "90-#ccc-#666"})

次に、Raphael が新しいものを挿入しlinearGradientて参照します。

本当にSVG ソースを操作する必要がある場合は、次のようなことができます...

var gradient = document.getElementById('490-_7ADADD-_338A93');
var stops = gradient.querySelectorAll('stop');
stops[0].setAttribute("stop-color", "#c00");
stops[1].setAttribute("stop-color", "#00c");

ただし、これにより VML の互換性が失われます (IE 8 以下)。

于 2013-02-15T15:49:52.100 に答える