削除された内容 追加された内容
色の指定は%単位でも可能
→‎画像そのものの記法: 色の指定方法が長くなったので、とりあえず節を分割。
189 行
== 画像そのものの記法 ==
=== 四角形 ===
==== 基本 ====
'''rect'''要素で表します。<ref name="mdn:svg:rect">https://developer.mozilla.org/ja/docs/Web/SVG/Element/rect</ref>
<syntaxhighlight lang="xml">
249 ⟶ 250行目:
とも書けます。
 
==== 色の指定方法 ====
 
色については <code>rgb(11,11,11)</code>のように0~255の十進数の数値指定で書いてもいい。つまり、
<syntaxhighlight lang="xml">
262 ⟶ 263行目:
rectに限らず、円や線分など他の図形でも同様に、styleやrgbを使える。
 
;百分率も可能
 
色の指定は%単位でも可能ですが、rgbの3色すべてに%をつける必要があります。
<syntaxhighlight lang="xml">
271 ⟶ 272行目:
</syntaxhighlight>
 
;不透明度アルファ
 
色はさらに、不透明度アルファを追加した{{code|rgba()}}を使える。ただし、不透明度の値の指定は 0 ~ 1.0 の間の数値で行わなければならない。
<syntaxhighlight lang="xml">
286 ⟶ 287行目:
{{code|rgba}}の第4引数は'''不'''透明度である。0から1の間で指定する。不透明にしたい場合には値を1にする。この不透明の数値の指定方法は、CSSに由来する方法である。(Inkscapeなどのドローソフトでは不透明度を0~255の数値で指定するものもあるが、ブラウザ版SVGの仕様とは異なるので注意。)
 
;フィレット
 
図形のカドを丸まらせたい場合(製図の用語で言う「フィレット」)、rxおよびryで丸めの半径を指定できる。
<syntaxhighlight lang="xml">
298 ⟶ 299行目:
rgba()関数は、0~255までの定義域と、0~1までの定義域とが混在しているので、あまりメンテナンスがしやすくないかもしれません。
 
;透明の属性
 
rgb()関数でも透明の処理もできるように、属性で fill-opacity という塗りつぶし領域の不透明度を0~1で指定できる属性がありますので、メンテナンスのしやすさから、不透明度の指定には fill-opacity を使うほうがいいかもしれません。