Jacally

xml 代码

xml version="1.0"?>  
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  
     
  <desc>Basic shapesdesc>  
     
  <g>  
    <circle cx="50" cy="50" r="25" />  
    <ellipse cx="75" cy="125" rx="50" ry="25" />  
  
    <rect x="155" y="5" width="75" height="100"/>  
    <rect x="250" y="5" width="75" height="100" rx="30" ry="20" />  
  
    <line x1="0" y1="150" x2="400" y2="150"    
                         stroke-width="2" stroke="blue"/>  
       
    <polyline points="50,175 150,175 150,125 250,200" />  
    <polygon points="350,75 379,175 355,175 355,200 345,200    
                                      345,175 321,175" />  
  
    <rect x="0" y="0" width="400" height="200"    
            fill="none" stroke="red" stroke-width="3" />  
  g>  
svg>  
  

添加文本
第 4 页（共5 页）


除了形状以外，SVG 图像还可以包含文本。SVG 给予设计人员和开发人员对文本的大量控制，可以获得很好的图形效果而不必借助失去真实纹理信息的图像（*.gif 或 *.jpg 图像甚至 Flash 电影常常这么做）。
SVG 的文本和字体能力在以添加文本开始的文本部分讨论，而现在重要的是要理解所有在传统 HTML 页面中通过级联样式表（Cascading Style Sheet）可以获得的效果，也都可以在 SVG 图像内的文本元素中得到。例如：
xml 代码
xml version="1.0"?>  
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
<svg width="400" height="125" xmlns="http://www.w3.org/2000/svg">  
     
  <desc>Basic textdesc>  
     
  <g>  
    <rect x="0" y="0" width="400" height="125" fill="none"    
            stroke="blue" stroke-width="3"/>  
     
    <text x="10" y="50" font-size="30">Welcome to the world oftext>  
    <text x="10" y="100" font-size="40"    
       font-family="Monotype Corsiva"  
       fill="yellow" stroke="red">Scalable Vector Graphics!text>  
  g>  
svg>  
 

渲染顺序
第 5 页（共5 页）


当组合多种不同元素时，正象 SVG 图像一样，重要的是牢记各项在页面上的放置顺序，因为这关系到谁“在上面”出现。在一个 HTML 页面上，使用 z-index 属性来控制这一分层效果，而对于 SVG 图像，则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。
如果指定一个元素没有填充色（使用 fill="none"），那么在它下面的各项会显现出来，就象您在这里看到的：
xml 代码
xml version="1.0"?>  
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  
     
  <desc>Overlapping shapesdesc>  
     
  <g>  
    <ellipse cx="125" cy="50" rx="50" ry="25"    
                           fill="none" stroke="black" />  
    <circle cx="125" cy="50" r="25" fill="dodgerblue" />  
    <circle cx="125" cy="50" r="10" fill="black" />  
  
    <ellipse cx="250" cy="50" rx="50" ry="25"    
                           fill="none" stroke="black" />  
    <circle cx="250" cy="50" r="25" fill="dodgerblue" />  
    <circle cx="250" cy="50" r="10" fill="black" />  
  
    <polygon points="65,50 185,50 185,75, 150,100    
                                          100,100 65,75"   
             fill="none" stroke="purple" stroke-width="4"/>  
    <polygon points="190,50 310,50 310,75, 275,100    
                                          225,100 190,75"   
             fill="none" stroke="purple" stroke-width="4"/>    
                
    <line x1="65" y1="50" x2="310" y2="50"    
                          stroke="plum" stroke-width="2"/>               
  
  g>  
svg>  

请注意每个元素会覆盖在它之前出现的元素。