廃止
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。
<solidcolor>
は SVG の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。
注: これは実験的な義jツウであり、まだブラウザーには実装されていません。回避策としては、 <linearGradient>
を単一の色経由点で扱うというものがあります。これはあまりすっきりしておらず、 <solidcolor>
とは異なり、それ自身をグラデーションの定義に使用することができません。
使用場面
missing
属性
グローバル属性
固有の属性
なし。
DOM インターフェイス
この要素は SVGSolidcolorElement
インターフェイスを実装しています。
例
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150">
<defs>
<!-- solidColor is experimental. -->
<solidcolor id="myColor" solid-color="gold" solid-opacity="0.8"/>
<!-- linearGradient with a single color stop is a less elegant way to
achieve the same effect, but it works in current browsers. -->
<linearGradient id="myGradient">
<stop offset="0" stop-color="green" />
</linearGradient>
</defs>
<text x="10" y="20">Circles colored with solidColor</text>
<circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)"
fill="white"/>
<circle cx="50" cy="65" r="35" fill="url(#myColor)"/>
<text x="10" y="120">Circles colored with linearGradient</text>
<circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)"
fill="white"/>
<circle cx="50" cy="165" r="35" fill="url(#myGradient)"/>
</svg>
結果
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。