HTML TIPS & TRICKS 2000/11
SVGの初歩を制する

QUESTION 2　図形を透明化せよ！

　2問目は図形を半透明にします。IEのフィルターをイメージしてもらうといいと思います。あれは面白い機能ではありますが、 あまりわかりやすいものではありませんでしたし、しかもかなり環境に依存していました。
　SVGのものは少しも難しくなく、しかも国際規格の標準機能です。表示にはプラグインを使うわけですから、 かなり思いきって使えるでしょう。

<A href="200011-2.svg" type="image/svg-xml">SVGファイル 200011-2.svg</A>

　今度もソースを見てください。1問目とほとんど同じなので、今度は変更した部分だけです。

<style type="text/css">
<![CDATA[
    text
    {
        fill:#FF5060;
        font-size:1cm;
        font-weight:bold;
        opacity:0.6;
    }

    rect
    {
        fill:#BBA0E0;
        stroke:#AA55AA;
        stroke-width:3;
        opacity:0.5;
    }

    ellipse
    {
        fill:#90FF90;
        stroke:orange;
        stroke-width:3;
        opacity:0.7;
    }
]]>
</style>

　8行目16行目24行目に、新しく"opacity"というプロパティが加わっています。これはオブジェクトの透明度を指定するもので、 その値は0.0から0.1の少数です。0.1のときに不透明で、0.0で完全に透明になります。省略した場合は1.0です。