SVG-2.25 > SVG

SVG-2.25

誤訳の報告

名前¶

SVG - Scalable Vector Graphics (SVG)ドキュメントを生成するためのPerl拡張

バージョン¶

Version 2.25 (22.07.02)

概要¶

    #!/usr/bin/perl -w
    use strict; 
    use SVG;

    # SVGオブジェクトの生成
    my $svg= SVG->new(width=>200,height=>200);

    # group要素を生成するための明示的な要素コンストラクタの利用
    my $y=$svg->group(
        id    => 'group_y',
        style => { stroke=>'red', fill=>'green' }
    );

    # グループに円(circle)を追加
    $y->circle(cx=>100, cy=>100, r=>50, id=>'circle_in_group_y');

    # あるいは名前によってgroup要素を生成するよう汎用的な'tag'メソッドを利用
    my $z=$svg->tag('g',
                    id    => 'group_z',
                    style => {
                        stroke => 'rgb(100,200,50)',
                        fill   => 'rgb(10,100,150)'
                    }
                );

    # 汎用的な'tag'メソッドを使って円(circle)を作成し追加
    $z->tag('circle', cx=>50, cy=>50, r=>100, id=>'circle_in_group_z');

    # group zというグループでの四角にアンカーを作成
    my $k = $z->anchor(
        id      => 'anchor_k',
        -href   => 'http://test.hackmare.com/',
        -target => 'new_window_0'
    )->rectangle(
        x     => 20, y      => 50,
        width => 20, height => 30,
        rx    => 10, ry     => 5,
        id    => 'rect_k_in_anchor_k_in_group_z'
    );

    # SVGオブジェクトの描画。暗黙のうちにsvg名前空間を利用。
    print $svg->xmlify;

    # あるいはオブジェクト全体を描画することなく、SVGオブジェクトの子供ノードを描画
    print $k->xmlify; #$kの祖先ノードを何も描画することなく、
                      #上記の四角が入ったアンカー$kを描画

    # あるいは明示的にsvg名前空間を使用し、それ自身のDTDを持ったドキュメントを生成
    print $svg->xmlify(-namespace=>'svg');

    # あるいは明示的にsvg名前空間を使用し、インラインのドキュメントを生成
    print $svg->xmlify(
        -namespace => "svg",
        -pubid => "-//W3C//DTD SVG 1.0//EN",
        -inline   => 1
    );

説明¶

SVGは、SVG(Scalable Vector Graphics)イメージのDOM表現を含むネストしたデータ構造を生成する100% Perlのモジュールです。SVGを使って、SVGオブジェクトを生成したり、それに別のSVGインスタンスを埋め込んだり、DOMオブジェクトにアクセスしたり、 javascriptを作成し、アクセスしたり、SMILアニメージョン・コンテンツを生成するといったことができます。メモリ256K RAM (訳者注：いくらなんでも256Mの間違いでしょう）500MHz Linux RH7マシンでは、SVG.pmは1秒間に12,000を超える要素を超えます。

SVGドキュメントを生成するための一般的なステップ¶

SVGを生成することは簡単な3つのステップの処理になります：

1 最初のステップはSVGオブジェクトを"new"で組み立てます。
2 ２番目のステップはSVG要素を作成するために要素コンストラクタを呼ぶことです。要素コンストラクタの例としては"circle" や "path"があります。
3 ３番目、最後のステップはSVGオブジェクトを"xmlify"メソッドを使ってXMLに描画することです。

"xmlify" メソッドは、SVGがXMLオブジェクトを描画することを制御するいくつかのオプションの引数を取ります。特にスタンドアロンのSVGドキュメントかSVGドキュメントの一部が生成されるかを決定します：

-stand-alone: それ自身の関連するDTDを持った完全なSVGドキュメント。オプションでSVG要素の名前空間を指定することができます。
-in-line: DTDを持たないインライン(in-line)のSVGドキュメントの一部です。それは他のXML コンテンツに埋め込まれます。スタンドアロンのドキュメントと同様、代わりの名前空間を指定することが出来ます。

3番目のステップになるまでXMLコンテンツは生成されません。ここの時点まで、全ての構築された要素の定義は、アクセスや変更をすることができる DOMライクなデータ構造体にあります。

EXPORTS¶

何もありません。しかし、オプションと追加の要素メソッドがインポート・リストに指定されることを許しています。これらのオプションと要素は、"new"コンストラクタで作成された全てのSVGインスタンスで利用することができます。例えば、インデントの文字列をレベルごとに2つのスペースに変更するためには、以下のようにします：

    use SVG qw(-indent => "  ");

-autoの例外を除けば、すべてのオプションは"new"コンストラクタでも指定することができます。現在サプートされているオプションは以下の通りです：

    -auto        全ての理解されないメソッド呼び出しの自動ロードを可能にします(0)
    -indent      SVGがXMLに描画されるときのインデント("\t")。xmlifyメソッドには、そのままにしておくのが一番です。
    -elsept      要素間の区切り("\n")。xmlifyメソッドには、そのままにしておくのが一番です。
    -dtd         このドキュメントのために使いたいDTDの名前
    -inline      SVGがスタンドアロンであるかインラインであるか(0)
    -printerror  SVG生成エラーを標準エラー出力に出力するか(1)
    -raiseerror  生成エラーがあったらdieするか(1)
    -nostub      何も要素がない空のSVGドキュメントへのハンドルを返すだけ

SVGはインポート・リストで指定された追加の要素生成メソッドも許します。例えば'star'と'planet'要素メソッドを生成するためには以下のようにします：

    use SVG qw(star planet);

あるいは:

    use SVG ("star","planet");

これはSVG.pmによりサポートされる要素のリストに'star'を追加します（しかし、もちろん他のSVGパーザーへは、そうではありません...）。もう１つの方法して'-auto'オプションが、同じ名前の要素を生成するために呼ばれる、わからないメソッドを可能にします:

    use SVG (-auto => 1, "star", "planet");

(ここでは'star'や'planet'のように）明示的に指定された全ての要素は、あらかじめ宣言されます;他の要素はPerlで現れたとき、そのように定義されます。 '-auto'を有効にすることは、適切なメソッド名のコンパイル時の文法チェックを実質上、無効にするということに注意してください。

Example:

    use SVG (
        -auto       => 0,
        -indent     => "  ",
        -raiserror  => 0,
        -printerror => 1,
        "star", "planet", "moon"
    );

参考資料(SEE ALSO)¶

    perl(1), L<SVG::XML>, L<SVG::Element>, L<SVG::DOM>, L<SVG::Parser>
    http://roasp.com/
    http://www.w3c.org/Graphics/SVG/

作者¶

Ronan Oger, RO IT Systemms GmbH, ronan@roasp.com

CREDITS¶

Peter Wainwright, peter@roasp.com Excellent ideas, beta-testing, SVG::Parser

例¶

http://roasp.com/

このディストリビューションでのexamplesディレクトリをご覧ください。そこには十分にドキュメントが入った例がいくつか入っています。

WINDOWS DISTRIBUTION¶

http://roasp.com/ppm/

メソッド¶

SVGは明示的および汎用的の両方の要素コンストラクタメソッドを提供します。明示的なジェネレータは一般的に（２、３の例外を除けば）、それが生成する要素の名前がつけられます。もしtagメソッドがハイフンが入っているタグのために必要であれば、メソッド名はハイフンをアンダースコアに置換されます。つまり：タグ<column-heading id="new"> を生成するためには、$svg->column_heading(id=>'new')を使います。

すべての要素コンストラクタが要素属性とオプションのハッシュを取ります； 'id'や'border'のような要素属性は名前で渡されます。一方、メソッドのための（複数の代わりの形式をサポートする要素のタイプのような）オプションは前にハイフンがつけられて渡されます。例えば'-type'。両方のタイプは自由に混ぜることが出来ます；より多くの例については、"fe"メソッドとドキュメントに入っているコードサンプルをご覧ください。

new (constructor)¶

$svg = SVG->new(%attributes)

新しいSVGオブジェクトを生成します。ドキュメントSVG要素の属性は、キーと値のペアのオプションのリストとして渡されます。さらに（前にハイフンがついた）SVGオプションをオブジェクト単位に設定することが出来ます；

Example:

    my $svg1=new SVG;

    my $svg2=new SVG(id => 'document_element');

    my $svg3=new SVG(s
        -printerror => 1,
        -raiseerror => 0,
        -indent     => '  ',
        -docroot => 'svg', #default document root element (SVG specification assumes svg). Defaults to 'svg' if undefined
        -sysid      => 'abc', #optional system identifyer 
        -pubid      => "-//W3C//DTD SVG 1.0//EN", #public identifyer default value is "-//W3C//DTD SVG 1.0//EN" if undefined
        -namespace => 'mysvg',
        -inline   => 1,
        -dtd      => 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd', #the dtd you want to use (this is the default one)
        -elsep    => "\n", #the separation between elements (New line in this case)
        id          => 'document_element',
        width       => 300,
        height      => 200,
    );

デフォルトのSVGオプションはインポート・リストで設定することも出来ます。利用できるオプションの詳細については上記の"EXPORTS"をご覧ください。

さらに、以下のオプションがあります:

    -version
    -encoding
    -standalone
    -namespace ドキュメントや要素レベルの名前空間を定義します。設定の優先順位は要素,ドキュメントです。
    -inline
    -identifier
    -nostub
    -elsep

これらはxmlifyで、SVG->new宣言で設定した値をすべて上書きして、設定することもできます。

xmlify (alias: to_xml render)¶

$string = $svg->xmlify(%attributes);

svgドキュメントのxml表現を返します。

XML 宣言

    名前               デフォルト値
    -version           '1.0'               
    -encoding          'UTF-8'
    -standalone        'yes'
    -namespace         'svg'                - 要素の名前空間
    -inline            '0' - '1'であれば、インライン・ドキュメント
    -pubid             '-//W3C//DTD SVG 1.0//EN';
    -dtd (standalone)  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'

tag (alias: element)¶

$tag = $svg->tag($name, %attributes)

汎用的な要素ジェネレータ。$nameという名前、%attributesで指定された属性を持った要素を作成します。このメソッドは、ほとんどの明示的な要素ジェネレータの基本となります。

Example:

    my $tag = $svg->tag('g', transform=>'rotate(-45)');

anchor¶

$tag = $svg->anchor(%attributes)

anchor要素を生成します。anchorはオブジェクトを'ライブ'(つまりクリッカブル）にします。そのため描画されるオブジェクトあるいはグループ要素を子供として必要とします。

Example:

    # anchorの生成
    $tag = $svg->anchor(
        -href=>'http://here.com/some/simpler/svg.svg'
    );
    # anchorに円を追加。その円はクリックできます。
    $tag->circle(cx=>10,cy=>10,r=>1);

    # URLとターゲットを持つ、より複雑なanchor
    $tag = $svg->anchor(
          -href   => 'http://somewhere.org/some/other/page.html',
          -target => 'new_window'
    );

circle¶

$tag = $svg->circle(%attributes)

(cx,cy)に半径rの円を描きます。

Example:

    my $tag = $svg->circle(cx=>4, cy=>2, r=>1);

ellipse¶

$tag = $svg->ellipse(%attributes)

(cx,cy)に半径rx, ryの楕円を描きます。

Example:

    my $tag = $svg->ellipse(
        cx=>10, cy=>10,
        rx=>5, ry=>7,
        id=>'ellipse',
        style=>{
            'stroke'=>'red',
            'fill'=>'green',
            'stroke-width'=>'4',
            'stroke-opacity'=>'0.5',
            'fill-opacity'=>'0.2'
        }
    );

rectangle (alias: rect)¶

$tag = $svg->rectangle(%attributes)

(x,y)に幅'width'、高さ'height'で、角の丸みの径が'rx'と'ry'の四角を描きます。

Example:

    $tag = $svg->rectangle(
        x=>10, y=>20,
        width=>4, height=>5,
        rx=>5.2, ry=>2.4,
        id=>'rect_1'
    );

image¶

 $tag = $svg->image(%attributes)

(x,y)に幅'width'、高さ'height'で、'-href'で結び付けられたイメージ・リソースを描きます。"use"もご覧ください。

Example:

    $tag = $svg->image(
        x=>100, y=>100,
        width=>300, height=>200,
        '-href'=>"image.png", #SVGを埋め込むことも出来ます。例えば "image.svg"
        id=>'image_1'
    );

Output:

    <image xlink:href="image.png" x="100" y="100" width="300" height="200"/>

use¶

$tag = $svg->use(%attributes)

SVGドキュメントに入っているエンティティからコンテンツを取り出し、それを (x,y)に幅'width'、高さ'height'で、'-href'で結び付けられたイメージ・リソースに適用します。

Example:

    $tag = $svg->use(
        x=>100, y=>100,
        width=>300, height=>200,
        '-href'=>"pic.svg#image_1",
        id=>'image_1'
    );

Output:

    <use xlink:href="pic.svg#image_1" x="100" y="100" width="300" height="200"/>

SVGの仕様に従い、SVGでの'use'要素は外部のSVGファイルの中の1つの要素を示すことが出来ます。

polygon¶

$tag = $svg->polygon(%attributes)

'x1,y1,x2,y2,x3,y3,... xy,yn'という形式の文字列によって定義される頂点で n角の多角形を描きます。座標データから適切な文字列を生成するために便利な "get_path"メソッドが提供されます。

Example:

    # 五画形
    my $xv = [0,2,4,5,1];
    my $yv = [0,0,2,7,5];

    $points = $a->get_path(
        x=>$xv, y=>$yv,
        -type=>'polygon'
    );

    $c = $a->polygon(
        %$points,
        id=>'pgon1',
        style=>\%polygon_style
    );

SEE ALSO:

"polyline", "path", "get_path".

polyline¶

$tag = $svg->polyline(%attributes)

'x1,y1,x2,y2,x3,y3,... xy,yn'という形式の文字列によって定義される点を持つn点の折れ線を描きます。座標データから適切な文字列を生成するために便利な "get_path"メソッドが提供されます。

Example:

    # 10点のノコギリ状のパターン
    my $xv = [0,1,2,3,4,5,6,7,8,9];
    my $yv = [0,1,0,1,0,1,0,1,0,1];

    $points = $a->get_path(
        x=>$xv, y=>$yv,
        -type=>'polyline',
        -closed=>'true' #その折れ線が閉じるかどうかを指定
    );

    my $tag = $a->polyline (
        %$points,
        id=>'pline_1',
        style=>{
            'fill-opacity'=>0,
            'stroke-color'=>'rgb(250,123,23)'
        }
    );

line¶

$tag = $svg->line(%attributes)

(x1,y1) と (x2,y2)という２点の直線を描きます。

Example:

    my $tag = $svg->line(
        id=>'l1',
        x1=>0, y1=>10,
        x2=>10, y2=>0
    );

複数の結び付けられた線を描くためには、"polyline"を使ってください。

text¶

$text = $svg->text(%attributes)->cdata();

$text_path = $svg->text(-type=>'path'); $text_span = $text_path->text(-type=>'span')->cdata('A'); $text_span = $text_path->text(-type=>'span')->cdata('B'); $text_span = $text_path->text(-type=>'span')->cdata('C');

イメージに描かれるテキスト文字列のためのコンテナを定義します。

Input: -type = path type (path | polyline | polygon) -type = text element type (path | span | normal [default])

Example:

    my $text1 = $svg->text(
        id=>'l1', x=>10, y=>10
    )->cdata('hello, world');

    my $text2 = $svg->text(
        id=>'l1', x=>10, y=>10, -cdata=>'hello, world');

    my $text = $svg->text(
        id=>'tp', x=>10, y=>10 -type=>path)
        ->text(id=>'ts' -type=>'span')
        ->cdata('hello, world');

SEE ALSO:

    L<"desc">, L<"cdata">.

title¶

$tag = $svg->title(%attributes)

イメージのタイトルを生成します。

Example:

    my $tag = $svg->title(id=>'document-title')->cdata('This is the title');

desc¶

$tag = $svg->desc(%attributes)

イメージの説明(=description)を生成します。

Example:

    my $tag = $svg->desc(id=>'document-desc')->cdata('This is a description');

comment¶

$tag = $svg->comment(@comments)

イメージの説明を生成します。

Example:

    my $tag = $svg->comment('comment 1','comment 2','comment 3');

pi (Processing Instruction)¶

$tag = $svg->pi(@pi)

処理命令(processing instruction)の集合を生成します。

Example:

    my $tag = $svg->pi('instruction one','instruction two','instruction three');

    returns: 
      <lt>?instruction one?<gt>
      <lt>?instruction two?<gt>
      <lt>?instruction three?<gt>

script¶

$tag = $svg->script(%attributes)

Javascriptあるいはその他の互換性のあるスクリプト言語であるECMAscriptを使った、動的な(クライアント側）スクリプトのためのスクリプト・コンテナを生成します。

Example:

    my $tag = $svg->script(-type=>"text/ecmascript");

    # javascriptの行末を管理するよう注意して、
    # cdtaを持ったscriptタグを入れてください
    # qq|text| あるいは qq/text/ （このtextがスクリプト）
    # が、このためにうまく機能します。

    $tag->cdata(qq|function d(){
        //簡単な表示関数
        for(cnt = 0; cnt < d.length; cnt++)
            document.write(d[cnt]);//ループの終わり
        document.write("<BR>");//改行の出力
      }|
    );

path¶

$tag = $svg->path(%attributes)

path要素を描画します。pathの頂点はパラメータあるいは"get_path"メソッドを使って求められたものになります。

Example:

    # path定義で描画される 10点のノコギリ状パターン
    my $xv = [0,1,2,3,4,5,6,7,8,9];
    my $yv = [0,1,0,1,0,1,0,1,0,1];

    $points = $a->get_path(
        x => $xv,
        y => $yv,
        -type   => 'path',
        -closed => 'true'  #折れ線が閉じるように指定
    );

    $tag = $svg->path(
        %$points,
        id    => 'pline_1',
        style => {
            'fill-opacity' => 0,
            'fill-color'   => 'green',
            'stroke-color' => 'rgb(250,123,23)'
        }
    );

SEE ALSO:

"get_path".

get_path¶

$path = $svg->get_path(%attributes)

複数の点を持つSVG描画オブジェクト定義（path、polyline、polygon)に合うように形式が正しく整えられた点のテキスト文字列を返します。

Input: 以下の属性があります：

    -type     = パスの種類(path | polyline | polygon)
    x         = X座標の配列へのリファレンス
    y         = Y座標の配列へのリファレンス

Output: 以下のキー-値のペアで構成されるハッシュのリファレンス:

    points    = 適切なポイント定義文字列
    -type     = path|polygon|polyline
    -relative = 1 (絶対位置ではなく相対位置で定義）
    -closed   = 1 (曲線を閉じる- path と polygon のみ)

Example:

    #pathのためのパス定義を生成
    my ($points,$p);
    $points = $svg->get_path(x=&gt\@x,y=&gt\@y,-relative=&gt1,-type=&gt'path');
 
    #pathにSVGドキュメントを追加
    my $p = $svg->path(%$path, style=>\%style_definition);

    #polylineのための閉じられたpath定義を生成
    $points = $svg->get_path(
        x=>\@x,
        y=>\@y,
        -relative=>1,
        -type=>'polyline',
        -closed=>1
    ); # polylineのための閉じられたpath定義を生成

    # polylineをSVGドキュメントに追加
    $p = $svg->polyline(%$points, id=>'pline1');

Aliases: get_path set_path

animate¶

$tag = $svg->animate(%attributes)

SMILアニメーション・タグを生成します。これは何か空でないタグが入っていることが許されます。アニメーションSMILコマンドの細かい点に関する詳細な情報は W3Cを参照してください。

Inputs: -method = Transform | Motion | Color

  my $an_ellipse = $svg->ellipse(
      cx=>30,cy=>150,rx=>10,ry=>10,id=>'an_ellipse',
      stroke=>'rgb(130,220,70)',fill=>'rgb(30,20,50)'); 

  $an_ellipse-> animate(
      attributeName=>"cx",values=>"20; 200; 20",dur=>"10s", repeatDur=>'indefinite');

  $an_ellipse-> animate(
      attributeName=>"rx",values=>"10;30;20;100;50",
      dur=>"10s", repeatDur=>'indefinite');

  $an_ellipse-> animate(
      attributeName=>"ry",values=>"30;50;10;20;70;150",
      dur=>"15s", repeatDur=>'indefinite');

  $an_ellipse-> animate(
      attributeName=>"rx",values=>"30;75;10;100;20;20;150",
      dur=>"20s", repeatDur=>'indefinite');

  $an_ellipse-> animate(
      attributeName=>"fill",values=>"red;green;blue;cyan;yellow",
      dur=>"5s", repeatDur=>'indefinite');

  $an_ellipse-> animate(
      attributeName=>"fill-opacity",values=>"0;1;0.5;0.75;1",
      dur=>"20s",repeatDur=>'indefinite');

  $an_ellipse-> animate(
      attributeName=>"stroke-width",values=>"1;3;2;10;5",
      dur=>"20s",repeatDur=>'indefinite');

group¶

$tag = $svg->group(%attributes)

共通のプロパティを持つオブジェクトのグループを定義します。groupは style,animation,filter,transformation、そしてそれらに結び付けられたマウス・アクションを持つことができます。

Example:

    $tag = $svg->group(
        id        => 'xvs000248',
        style     => {
            'font'      => [ qw( Arial Helvetica sans ) ],
            'font-size' => 10,
            'fill'      => 'red',
        },
        transform => 'rotate(-45)'
    );

defs¶

$tag = $svg->defs(%attributes)

定義セグメントを定義します。defsはSVG.pmを使って定義されるとき、子供を必要とします。

Example:

    $tag = $svg->defs(id  =>  'def_con_one',);

style¶

$svg->tag('style', %styledef);

生成される以下のオブジェクトのためのスタイル定義を設定/追加します。

そのプロパティの値が子供により再定義されない全てのプロパティのためにスタイル定義はオブジェクトとすべてのその子供に適用します。

mouseaction¶

$svg->mouseaction(%attributes)

タグのためのマウス・アクション定義を設定/追加します。

attrib¶

$svg->attrib($name, $value)

$svg->attrib $name, $value

$svg->attrib $name, \@value

$svg->attrib $name, \%value

タグのための属性を設定/置換します。

cdata¶

$svg->cdata($text)

$textにcdataを設定します。SVG.pmはすべてのタグにcdataを設定することを可能にしています。タグが空タグの場合、SVG.pmは文句をいいませんが、描画エージョントはコケるでしょう。 SVG DTDでは、cdataは一般にテキストやスクリプトの内容を追加することだけを意味します。

Example:

    $svg->text(
        style => {
            'font'      => 'Arial',
            'font-size' => 20
        })->cdata('SVG.pm is a perl module on CPAN!');

    my $text = $svg->text(style=>{'font'=>'Arial','font-size'=>20});
    $text->cdata('SVG.pm is a perl module on CPAN!');

Result:

    E<lt>text style="font: Arial; font-size: 20" E<gt>SVG.pm is a perl module on CPAN!E<lt>/text E<gt>

SEE ALSO:

  L<"CDATA"> L<"desc">, L<"title">, L<"text">, L<"script">.

CDATA¶

 $script = $svg->script();
 $script->CDATA($text);

与えられたもの、そのままで描画される$textの内容を持った<![CDATA[ ... ]]>タグを生成します。 SVG.pmはすべてのタグにcdataを設定することを可能にしています。タグが空タグの場合、SVG.pmは文句をいいませんが、描画エージョントはコケるでしょう。 SVG DTDでは、cdataは一般にテキストやスクリプトの内容を追加することだけを意味します。

Example:

      my $text = qqｧ
        var SVGDoc;
        var groups = new Array();
        var last_group;
        
        /*****
        *
        *   init
        *
        *   Find this SVG's document element
        *   Define members of each group by id
        *
        *****/
        function init(e) {
            SVGDoc = e.getTarget().getOwnerDocument();
            append_group(1, 4, 6); // group 0
            append_group(5, 4, 3); // group 1
            append_group(2, 3);    // group 2
        }ｧ;
        $svg->script()->CDATA($text);

Result:

    E<lt>script E<gt>
      <gt>![CDATA[
        var SVGDoc;
        var groups = new Array();
        var last_group;
        
        /*****
        *
        *   init
        *
        *   Find this SVG's document element
        *   Define members of each group by id
        *
        *****/
        function init(e) {
            SVGDoc = e.getTarget().getOwnerDocument();
            append_group(1, 4, 6); // group 0
            append_group(5, 4, 3); // group 1
            append_group(2, 3);    // group 2
        }
        ]]E<gt>

SEE ALSO:

  L<"cdata">, L<"script">.

filter¶

$tag = $svg->filter(%attributes)

filterを生成します。filter要素は"fe"というfilterサブ要素を持ちます。

Example:

    my $filter = $svg->filter(
        filterUnits=>"objectBoundingBox",
        x=>"-10%",
        y=>"-10%",
        width=>"150%",
        height=>"150%",
        filterUnits=>'objectBoundingBox'
    );

    $filter->fe();

SEE ALSO:

"fe".

fe¶

$tag = $svg->fe(-type=>'type', %attributes)

filterサブ要素を生成します。"filter"要素の子供でなければなりません。

Example:

    my $fe = $svg->fe(
        -type     => 'DiffuseLighting'  # 必須 - 要素名が省略 'fe'
        id        => 'filter_1',
        style     => {
            'font'      => [ qw(Arial Helvetica sans) ],
            'font-size' => 10,
            'fill'      => 'red',
        },
        transform => 'rotate(-45)'
    );

以下のfilter要素が現在サポートされています：

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feDistantLight
feFlood
feFuncA
feFuncB
feFuncG
feFuncR
feGaussianBlur
feImage
feMerge
feMergeNode
feMorphology
feOffset
fePointLight
feSpecularLighting
feSpotLight
feTile
feTurbulence

SEE ALSO:

"filter".

pattern¶

$tag = $svg->pattern(%attributes)

urlによって後で参照されるパターンを定義します。

Example:

    my $pattern = $svg->pattern(
        id     => "Argyle_1",
        width  => "50",
        height => "50",
        patternUnits        => "userSpaceOnUse",
        patternContentUnits => "userSpaceOnUse"
    );

set¶

$tag = $svg->set(%attributes)

必要にあわせて他のセクションでも参照できるよう、１つのセクションでの SVGオブジェクトのための定義を設定します。

Example:

    my $set = $svg->set(
        id     => "Argyle_1",
        width  => "50",
        height => "50",
        patternUnits        => "userSpaceOnUse",
        patternContentUnits => "userSpaceOnUse"
    );

stop¶

$tag = $svg->stop(%attributes)

"gradient"のためのストップ・バウンダリを定義します。

Example:

   my $pattern = $svg->stop(
       id     => "Argyle_1",
       width  => "50",
       height => "50",
       patternUnits        => "userSpaceOnUse",
       patternContentUnits => "userSpaceOnUse"
   );

gradient¶

$tag = $svg->gradient(%attributes)

色の傾斜(=gradient)を定義します。linear あるいは radialのタイプにすることができます。

Example:

    my $gradient = $svg->gradient(
        -type => "linear",
        id    => "gradient_1"
    );

GENERIC ELEMENT METHODS¶

以下の要素がSVGによって汎用的にサポートされます:

altGlyph
altGlyphDef
altGlyphItem
clipPath
color-profile
cursor
definition-src
font-face-format
font-face-name
font-face-src
font-face-url
foreignObject
glyph
glyphRef
hkern
marker
mask
metadata
missing-glyph
mpath
switch
symbol
tref
view
vkern

これらのメソッドの使い方の例については"pattern"をご覧ください。

METHODS IMPORTED BY SVG::DOM¶

以下のSVG::DOM要素がSVGを通してアクセスすることが出来ます:

getChildren
getFirstChild
getLastChild
getParent
getSiblings
getElementByID
getElementID
getElements
getElementName
getParentElement
getType
getAttributes
getAttribute
flowText (SVG 1.1)

名前¶

バージョン¶

概要¶

説明¶

SVGドキュメントを生成するための一般的なステップ¶

EXPORTS¶

参考資料(SEE ALSO)¶

作者¶

CREDITS¶

例¶

WINDOWS DISTRIBUTION¶

メソッド¶

new (constructor)¶

xmlify (alias: to_xml render)¶

tag (alias: element)¶

anchor¶

circle¶

ellipse¶

rectangle (alias: rect)¶

image¶

use¶

polygon¶

polyline¶

line¶

text¶

title¶

desc¶

comment¶

pi (Processing Instruction)¶

script¶

path¶

get_path¶

animate¶

group¶

defs¶

style¶

mouseaction¶

attrib¶

cdata¶

CDATA¶

filter¶

fe¶

pattern¶

set¶

stop¶

gradient¶

GENERIC ELEMENT METHODS¶

METHODS IMPORTED BY SVG::DOM¶

SEE ALSO¶