HTML5のSVG2Dはじめに5-色表現と定義方法

著者：Eve Cole 更新時間：2025-04-11 04:00:03

SVGとキャンバスは同じであり、どちらも標準のHTML/CSSカラー表現方法を使用し、これらの色は充填属性とストローク属性に使用できます。

基本的に、色を定義するには次の方法があります。

1。色名：色名を使用して赤、青、黒...

2。RGBA/RGB値：これも理解しやすいです。たとえば、＃FF0000、RGBA（255,100,100,0.5）。

3。16進数：#ffffffなどの16進数で定義された色。

4。グラデーション値：これはキャンバスと同じであり、線形勾配とリング勾配の2つの勾配色をサポートします。下の図に示すように：

5。パターンフィリング：塗りつぶしの色としてカスタムパターンを使用します。

最初の数は非常にシンプルです。次の2つの2つの塗りつぶしに焦点を当てましょう。

線形勾配

線形勾配を使用して線形勾配を定義でき、各勾配色のコンポーネントは停止要素を使用して定義されます。次の例を参照してください。

<svg>

<defs>

<offset = "0％"/>を停止します

<offset = "50％"/>を停止します

<offset = "100％"/>を停止します

</lineargradient>

</lineargradient>

＃rect1 {fill：url（＃gradient1）; }

.stop1 {stop-color：red; }

.stop2 {stop-color：black; STOP-OPACITY：0; }

.stop3 {stop-color：blue; }

]]>

</style>

</defs>

</svg>

この例では、注意する必要があります。

1。勾配色要素をdefs要素に配置する必要があります。

2。勾配要素のID値を設定する必要があります。そうしないと、他の要素がこの勾配を使用できません。

3.グラデーションカラーメンバーはSTOPを使用して定義され、CSSを使用してそれらの特性を定義できます。標準のHTMLでサポートされているクラスやIDなどの属性をサポートしています。他の一般的な属性は次のとおりです。

オフセット属性：これは、メンバー色の作用範囲を定義し、この属性の値は0％から100％（または0〜1）です。通常、最初の色は0％に設定され、最後の色は100％に設定されます。

ストップカラー属性：これは非常にシンプルで、メンバーの色の色を定義します。

STOP-OPACITYプロパティ：メンバー色の透明性を定義します。

x1、y1、x2、y2属性：これら2つのポイントは、勾配の方向を定義します。デフォルトでそれを書かない場合、それは水平勾配です。上記の例では、垂直勾配も作成されます。

4.例に示すように、勾配色を使用して、url（#id）の形で塗りつぶしまたはストロークする値を割り当てます。

5。グラデーションメンバーの再利用：xlink：hrefを使用して定義された勾配メンバーを参照することもできます。したがって、上記の例は次のように書き直すこともできます。

<offset = "0％"/>を停止します

<offset = "50％"/>を停止します

<offset = "100％"/>を停止します

</lineargradient>

リンググラジエント

放射状勾配要素を使用してリンググラデーションを定義するか、停止を使用してメンバーの色を定義します。例を参照してください：

<svg>

<defs>

</radialgradient>

</radialgradient>

</defs>

</svg>

上記の例からは、要素名と一部の特別なメンバーを除き、他のすべては、停止の定義を含む線形勾配と同じです。defsに配置する必要があります。それはIDに設定する必要があり、URL（#ID）を使用して値を割り当てます。

オフセット属性：これは線形勾配値と同じですが、意味は異なります。リンググラジエントでは、0％が円の中心を表します。これは理解しやすいです。

CX、Cy、R属性：実際、理解しやすいです。リングは段階的です。もちろん、リングの中心と半径を定義する必要があります。上記の例では、円のサイズと位置を理解できます。

FX、FY属性：色の中心（フォーカス）の位置、つまり勾配色の最も密な場所での座標を定義します。上記の例では、最も赤い赤みがかったのは円の中心であり、デフォルトの効果です。変更したい場合は、FX、FY座標値を設定できます。

ただし、上記のCX、CY、R、FXの値に注意を払う必要があります。あなたはそれらがすべて小数であることがわかりますので、ユニットは何ですか？

これには、最初に別の関連属性を理解する必要があります：グラデーションナットは、グラデーションの色を定義するために使用される座標ユニットを定義します。このプロパティには、UsersSpaceOnuseとObjectBoundingBoxの2つの利用可能な値があります。

ObjectBoundingBoxはデフォルト値です。使用する座標は、ボックスを囲むオブジェクト（正方形の囲いボックスではない場合が複雑で、スキップする場合）に関連し、値範囲は0〜1です。たとえば、上記の例のCXとCYの座標値（0.25、0.25）。これは、円の中心がエンクロージャーボックスの左上隅の1/4であり、半径0.25は、図にあるように、半径がオブジェクトスクエアエンクロージャーボックスの長さの1/4であることを意味します。

userspaceonuseとは、絶対座標が使用されることを意味します。この設定を使用する場合、勾配の色と充填オブジェクトを同じ位置に保持する必要があることを確認する必要があります。

次の例を見てください。GradientUnitsプロパティのデフォルト値はObjectBoundingBoxであることに注意してください。

<svg>

<defs>

<radialgradient id = "gradient5"

cx = "0.5" cy = "0.5" r = "0.5" fx = "0.25" fy = "0.25">

</radialgradient>

</defs>

<rect x = "10" y = "10" rx = "15" ry = "15"

fill = "url（＃gradient5）" stroke = "black" stroke-width = "2"/>

</svg>

レンダリングを見ることで、焦点の意味を知るでしょう。

さらに、グラデーションカラー要素と勾配トランスフォームなどの変換プロパティがありますが、これはここでは焦点ではなく、変換は後で要約されます。

使用されるもう1つの可能な属性は、 spreadmethodプロパティです。これは、勾配色がエンドポイントに到達したときに取るべき動作を定義します。このプロパティには、PAD（デフォルト）、反射、繰り返しの3つのオプションの値があります。言うまでもなく、パッドは自然な移行です。勾配色が終わったら、最後のメンバーの色を使用して、オブジェクトの残りの部分を直接レンダリングします。 Refectはグラデーションの色を継続しますが、勾配色は最後の色から最初の色まで逆にレンダリングされ続けます。勾配色のエンドポイントに再び到達したら、順序を逆にして、オブジェクトがこの方法で満たされるようにします。繰り返しにより、勾配の色がレンダリングを継続することもできますが、逆には逆になり、最初の色から最後の色に何度もレンダリングされます。レンダリングは次のとおりです。

繰り返しレンダリングするコードを見てください。

<svg>

<defs>

<radialgradient id = "gradient"

cx = "0.5" cy = "0.5" r = "0.25" fx = "。25" fy = "。25"

SpreadMethod = "Repeat">

</radialgradient>

</defs>

<rect x = "50" y = "50" rx = "15" ry = "15"

fill = "url（#gradient）"/>

</svg>

テクスチャフィル

テクスチャフィリングは、人気のある充填方法でもあります。 SVGでは、パターンを使用してテクスチャを作成し、このパターンを使用して他のオブジェクトを埋めることができます。例を直接見てみましょう。

<svg>

<defs>

</lineargradient>

</lineargradient>

</defs>

<defs>

</pattern>

</defs>

</svg>

この例はシンプルに見え、グラデーションの色からパターンを作成し、パターンを使用します

長方形を埋めます。ここに注意してください：

1.このパターンを異なるブラウザで埋めると、効果が異なります。

たとえば、例はFirefixとChromeで同じように機能します。しかし、グラデーションの色を作成する場合

パターンが同じdefsの組み合わせで定義されている場合、Firefoxは依然として正常にレンダリングできます。

ただし、Chromeは勾配の色を認識できず、デフォルトの黒でのみ満たされます。

2。パターンもIDを定義する必要があります。

3。パターンもdefsで定義する必要があります。

4.パターンの使用は、充填またはストロークにURL（#ID）を直接割り当てることでもあります。

上記はすべて非常に簡単です。この例の座標表現に焦点を当てましょう。座標はパターンがより複雑です。

パターンには、2つの関連プロパティが含まれています。パターンユニットとパターンContentunits属性。両方のプロパティには、ObjectBoundingBoxとUsersSpaceOnuseの2つの値しかありません。これらの2つの値の意味は上記で説明されています。ここで簡単に混同しやすいのは、これら2つのプロパティのデフォルト値が異なることですが、これを行う理由を理解すると、これを行うことは理にかなっていることがわかります。

1。パターンユニット属性

このプロパティは、GradientunitsのGradientのプロパティと同じであり、ObjectBoundingBoxはデフォルトで使用されます。この属性の影響を受ける属性は、x、y、幅、および高さです。これらの4つの属性は、パターンの開始点と幅をそれぞれ定義します。どちらも相対値を使用しており、例では、水平方向と垂直方向を4回記入したいため、幅と高さの両方が0.25に設定されます。

2。PatternContentunitsプロパティ

このプロパティのデフォルト値は、usersspaceonuseを使用して、まったく逆です。このプロパティは、パターンに描かれた形状の座標系（rect、上記の円など）について説明します。つまり、デフォルトでは、パターンに描画する形状は、異なる座標系とパターン自体のサイズ/位置を使用します。上記の例のケースを考慮して、200*200の長方形を埋めて、各方向を4回繰り返したいと思います。これは、各パターンが50*50であることを意味するため、この50*50の長方形には、2つの長方形とパターン内の円が描画されます。このようにして、上記のパターンの長方形と円の座標を理解できます。さらに、この例のパターンを中央に配置するには、レンダリング前に10pxで相殺する必要があります。この値はPatternUnitsプロパティによって制限されているため、デフォルトでは、XとYの値は10/200 = 0.05です。

では、なぜこのような2つの属性のデフォルト値をパターンに設定するのですか？

これは、ユーザーの使用によって決定されます（上記の例で説明します）：

最初のパターンスタイル：これはほとんどの状況だと思うので、デフォルト値として処理されます。外側のグラフがスケーリングされるにつれてパターンが伸び、外側の正方形の大きさに関係なく、パターンは常に両方向に4倍に記入されます。ただし、パターンに含まれるグラフィックは、外側に満たされた正方形がスケーリングされているため、伸びません。それは大げさですが、それを理解してください。

2番目のパターンスタイル：パターンの形状は、外側のエッジの形状がスケーリングされると伸びます。また、PatternContentunitsプロパティの値をObjectBoundingBoxに設定して、この効果を実現することもできます。たとえば、次のようにパターンパーツを変更します。

</pattern>

変更後、満たされた長方形のサイズを変更すると、パターンの形状も伸びます。また、変更後、周辺オブジェクトの座標に変更されるため、パターンのxおよびy座標は必要ありません。パターンは、充填された形状に合わせて常に調整されます。

3番目のパターンスタイル：パターンの形状とサイズが固定されています。周辺オブジェクトがどのように拡大されていても、座標系をユーザースペースに変更してこの効果を達成できます。コードは次のとおりです。

</pattern>

これら3の典型的なパターンを以下の図に示します。

実用的なリファレンス：

公式文書：http：//www.w3.org/tr/svg11/

スクリプトインデックス：http：//msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

開発センター：https：//developer.mozilla.org/en/svg

人気リファレンス：http：//www.chinasvg.com/