SVG入門教程(二)定義とグループ

21210 ワード
xml
再利用可能なウィジェットを定義します.
第1ページ(全部で5ページ)
一般的にSVG画像の構築においては、各部分または再使用可能なもの、または画像本体内で定義するのが不便である.これらの場合、一般的に便利な方法は、ドキュメントの定義部分( ） 。

， ， 。 ， ， （ ）。 ， （gradient）， 。（ グラデーション 。） 

xml
  1. <!---->xml version="1.0"?>  
  2. <!---->
  3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
  4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  
  5.      
  6.   <desc>Referenced itemsdesc>  
  7.   <defs>  
  8.   
  9.     <polygon id="lens" points="65,50 185,50 185,75, 150,100    
  10.                                           100,100 65,75"   
  11.              fill="none" stroke="purple" stroke-width="4"/>  
  12.         
  13.      <radialGradient id="irisGradient">  
  14.         <stop offset="25%" stop-color="green" />  
  15.         <stop offset="100%" stop-color="dodgerblue" />  
  16.      radialGradient>  
  17.   
  18.   defs>  
  19.      
  20.   <g>  
  21. . . .               
  22.   
  23.   

 


<nobr> 2 （ 5 ）</nobr>


， 。

， URL（ URI） 。 HTML ，id としてドキュメント の1つの を したものです. えば、URI #irisGradientはirisGradientとして された (またはグラデーション )を することを します.すなわち、 のfill の から することができます.

xml
  1. <circle cx="125" cy="50" r="25" fill="url(#irisGradient)"/>  
url() の に してください.
コードはこのセクションの のページに されます.グラデーションは の に されています.
 
された を として します.
 3ページ( で5ページ)
のエントリを する 2の は、 。 ： 

  
  

   
   xml   
  
  

  
   
   
   

   
   
     
    
  1. <use xlink:href="#lens" />  
    2.  
   

  
  
 142を いることによって われる.
  で えられた  を って、   をページに  します.
ここでは2つの    が  されています.まず、xlinkの    の  に  してください.ほとんどのビューアはそれがなくても、この  を しく  します.しかし、  を  するために、xlinkの    は     ，      。  
 
  ，                                 。        と     （viewport）      ，              ：             (190, 50)   ，             125    。      
 

  
  

   
   xml   
  
  

  
   24454579142 142 142 
   
   

   
   
     
    
  1. <use xlink:href="#lens" x="125"/>  
    2.  
   

  
  

 142 142 142 142 142にあります.
 の  で  のレンズを  します.これは「  」に して125ピクセルオフセットされています.
グループ  
 4ページ(  で5ページ)
  に、SVGは  の  を  するだけでなく、  の<radialgradient></radialgradient>  から  できるかもしれない.
 み り   と   を  するために、  をセットに  するのは、   に い  である.この  のために、SVGは  ，                 。            ，         （               ）。      
 

  
  

   
   xml   
  
  

  
   
   
   

   
   
     
    
  1. . . .   
    2.  
    
  2.     <g stroke="red" stroke-width="3">  
    3.  
    
  3.       <ellipse cx="125" cy="50" rx="50" ry="25"    
    4.  
    
  4.                            fill="none" stroke="black" />  
    5.  
    
  5.       <circle cx="125" cy="50" r="25" fill="url(#irisGradient)" />  
    6.  
    
  6.       <circle cx="125" cy="50" r="10" fill="black" />  
    7.  
    
  7.     g>  
    8.  
    
  8. . . .   
    9.  
   

  
  
 142 142 142を  する.
すべての  を  するのは、3つのピクセル の です.    の   がないので、  の    のすべての  は  です.
  
  を す
5ページ (  で5ページ)
   な  は、   がどのように  されているかを します.
   
   

    
    xml   
   
   

   
    
    
    

    
    
     
     
  1. <!---->xml version="1.0"?>  
    2.  
     
  2. <!---->
    3.  
     
  3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
    4.  
     
  4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"  
    5.  
     
  5.                       xmlns:xlink="http://www.w3.org/1999/xlink">  
    6.  
     
  6.      
    7.  
     
  7.   <desc>Reusing itemsdesc>  
    8.  
     
  8.   <defs>  
    9.  
     
  9.   
    10.  
     
  10.      <polygon id="lens" points="65,50 185,50 185,75, 150,100    
    11.  
     
  11.                                           100,100 65,75"   
    12.  
     
  12.              fill="none" stroke="purple" stroke-width="4"/>  
    13.  
     
  13.         
    14.  
     
  14.      <radialGradient id="irisGradient">  
    15.  
     
  15.         <stop offset="25%" stop-color="green" />  
    16.  
     
  16.         <stop offset="100%" stop-color="dodgerblue" />  
    17.  
     
  17.      radialGradient>  
    18.  
     
  18.         
    19.  
     
  19.      <g id="eye">  
    20.  
     
  20.         <ellipse cy="50" rx="50" ry="25"    
    21.  
     
  21.                            fill="none" stroke="black"/>  
    22.  
     
  22.         <circle cy="50" r="25"/>  
    23.  
     
  23.         <circle cy="50" r="10" fill="black"/>  
    24.  
     
  24.      g>  
    25.  
     
  25.   
    26.  
     
  26.   defs>  
    27.  
     
  27.      
    28.  
     
  28.   <g>  
    29.  
     
  29.   
    30.  
     
  30.     <use xlink:href="#eye" x="125" fill="url(#irisGradient)"/>  
    31.  
     
  31.     <use xlink:href="#eye" x="250" fill="dodgerblue"/>         
    32.  
     
  32.          
    33.  
     
  33.     <use xlink:href="#lens"/>  
    34.  
     
  34.     <use xlink:href="#lens" x="125"/>  
    35.  
     
  35.                     
    36.  
     
  36.     <line x1="65" y1="50" x2="310" y2="50"    
    37.  
     
  37.                           stroke="plum" stroke-width="2"/>               
    38.  
     
  38.   
    39.  
     
  39.   g>  
    40.  
     
  40. svg>  
    41.  
    

   
   

  を   しても、 の  の のように、それぞれの   を  することができます.
Oracleは、あるユーザの下のすべてのテーブルデータを削除しますが、テーブル構造は削除されません.