削除された内容 追加された内容
201 行
</syntaxhighlight>
 
 
==== 透明化 ====
;不透明度アルファ
色はさらに、不透明度アルファを追加した{{code|rgba()}}を使える。ただし、不透明度の値の指定は 0.0 ~ 1.0 の間の数値で行わなければならない。SVGの不透明度は 0 で完全に不透明であり、1 で完全に透明である
 
 
<syntaxhighlight lang="xml">
<svg>
215 ⟶ 219行目:
 
{{code|rgba}}の第4引数は'''不'''透明度である。0から1の間で指定する。不透明にしたい場合には値を1にする。この不透明の数値の指定方法は、CSSに由来する方法である。(Inkscapeなどのドローソフトでは不透明度を0~255の数値で指定するものもあるが、ブラウザ版SVGの仕様とは異なるので注意。)
 
;フィレット
図形のカドを丸まらせたい場合(製図の用語で言う「フィレット」)、rxおよびryで丸めの半径を指定できる。
<syntaxhighlight lang="xml">
<svg>
<rect x="1" y="1" width="100" height="100"
fill="rgb(255,255,1)" stroke="rgba(0,0,0,1)" stroke-width="5 "
rx="10" ry="10" />
</svg>
</syntaxhighlight>
 
rgba()関数は、0~255までの定義域と、0~1までの定義域とが混在しているので、あまりメンテナンスがしやすくないかもしれません。
 
;透明の属性
rgb()関数でも透明の処理もできるように、属性で fill-opacity という塗りつぶし領域の不透明度を0~1 0.0 ~ 1.0 で指定できる属性がありますので、メンテナンスのしやすさから、不透明度の指定には fill-opacity を使うほうがいいかもしれません。
 
fill-opacity は 0 で完全に不透明であり、1 で完全に透明である。
 
 
<syntaxhighlight lang="xml">
242 ⟶ 239行目:
</syntaxhighlight>
 
なお、ストロークの不透明度を指定できる stroke-opacity という属性もあるのですが、あまり実装の性能がよくありません。ハードウェアやOSなどの事情により、太いストロークを描画する場合に、微妙に表示が崩れてしまう場合があります。<!-- WindowsだけでなくFedora Linux 32 でも同様に表示くずれが確認できたので、OSの問題でなくハードウェアの問題。 -->
 
==== 図形の加工 ====
;フィレット
図形のカドを丸まらせたい場合(製図の用語で言う「フィレット」)、rxおよびryで丸めの半径を指定できる。
<syntaxhighlight lang="xml">
<svg>
<rect x="1" y="1" width="100" height="100"
fill="rgb(255,255,1)" stroke="rgba(0,0,0,1)" stroke-width="5 "
rx="10" ry="10" />
</svg>
</syntaxhighlight>
 
この他、transfrom属性とrotate()関数を使って、斜めに傾いた長方形などの図形を書けます。長方形以外の図形や文字列もrotate()関数に対応しています。