SVG 编程第一步

IvanLi

浏览: 602849 次
性别:
来自: 北京

最近访客更多访客>>

zhaoliuchuan

hnuxgp

hujihong

ayizylusi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术天地

编程 Firefox XML IBM XHTML

Supported　Browser

Firefox 2+
Opera 9.0+
Safari 3.0+
SeaMonkey 1.1+

SVG Resource

把SVG嵌入到网页中的3种方式

Use <object> Tag
Use <embed> Tag (Best Practice)
As embeded namespace

<?xml version="1.0" standalone="no"?>
<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>SVG as embedded object and nested namespace</title>
</head>
<body>
<h2>Object tag</h2>
<object type="image/svg+xml" data="standalone.svg">
Your browser is currently unable to display SVG images.
</object>
<h2>Nested namespace</h2>
<svg:svg version="1.1" width="5cm" height="4cm"
      xmlns:svg="http://www.w3.org/2000/svg">
  <svg:title>Four rectangles</svg:title>
  <svg:rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
  <svg:rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
  <svg:rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
  <svg:rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
  <!-- Show outline of canvas using 'rect' element -->
  <svg:rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
       fill="none" stroke="blue" stroke-width=".02cm" />
</svg:svg>
<h2>Embed tag</h2>
<embed id="svg3" src="standalone.svg" />
</body>
</html>

SVG 中画箭头例子

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Markers</desc>
  <defs>
    <marker id="arrow"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth" markerWidth="3" markerHeight="10"
      orient="auto">

      <path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black"/>

    </marker>
  </defs>
  <rect x="1" y="1" width="398" height="300"
        fill="none" stroke="blue" />

  <!-- First row -->
  <path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"
        stroke="purple" stroke-width="5" fill="none"
        marker-start="url(#arrow)"
        marker-mid="url(#arrow)"
        marker-end="url(#arrow)" />

  <!-- Second row -->
  <path d="M75,200 c25,-75 50,50 100,0 s50,-50 150,50"
        stroke="purple" stroke-width="3" fill="none"
        marker-start="url(#arrow)"
        marker-mid="url(#arrow)"
        marker-end="url(#arrow)" />
</svg>

SVG 中用鼠标划线例子

<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events" 
     width='100%' height='100%'
    onload='Init(evt)'   onmousedown='Grab(evt)'    onmousemove='Drag(evt)' onmouseup='Drop(evt)'>
   <title>Drag And Drop</title>
   <desc>
      A Demo to Draw line in SVG Canvas
   </desc>
   <defs>
    <marker id="arrow"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth" markerWidth="3" markerHeight="10"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black"/>
    </marker>
   </defs>
   <script type="text/ecmascript"><![CDATA[
      var SVGDocument = null;
      var SVGRoot = null;
      var BackDrop = null;
      var isDrawLine = null;
      var gCanvas = null;
      var lineNode = null;

      function Init(evt)
      {
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;

         // this will serve as the canvas over which items are dragged.
         //    having the drag events occur on the mousemove over a backdrop
         //    (instead of the dragged element) prevents the dragged element
         //    from being inadvertantly dropped when the mouse is moved rapidly
         BackDrop = SVGDocument.getElementById('BackDrop');
         gCanvas = SVGDocument.getElementById('gid');
      }

      function Grab(evt)
      {   
          lineNode=SVGDocument.createElementNS('http://www.w3.org/2000/svg','line');
          lineNode.setAttributeNS(null,'x1',evt.clientX);
          lineNode.setAttributeNS(null,'y1',evt.clientY);
          lineNode.setAttributeNS(null,'x2',evt.clientX);
          lineNode.setAttributeNS(null,'y2',evt.clientY);
          lineNode.setAttributeNS(null,'stroke','blue');
          lineNode.setAttributeNS(null,'stroke-width','2');
          BackDrop.parentNode.appendChild(lineNode);
          isDrawLine = true;
      };
      function Drag(evt)
      {
         // if we don't currently have an element in tow, don't do anything
         if (isDrawLine)
         {
            lineNode.setAttributeNS(null,'x2',evt.clientX);
            lineNode.setAttributeNS(null,'y2',evt.clientY);
            lineNode.setAttributeNS(null,'marker-end','url(#arrow)');
         }
      };
      function Drop(evt)
      {
         // if we aren't currently dragging an element, don't do anything
         if ( isDrawLine )
         {
            lineNode.setAttributeNS(null,'x2',evt.clientX);
            lineNode.setAttributeNS(null,'y2',evt.clientY);
            isDrawLine = false;
         }
      };
   ]]></script>
  <g id="gid">
   <rect id='BackDrop' x='-10%' y='-10%' width='110%' height='110%' fill='none' pointer-events='all' />
  </g>
</svg>

2
顶

0
踩

分享到：

在样式定义有冲突时的优先级如何分配 | EXT 中js语法请教

2008-01-09 13:34
浏览 6217
评论(1)
查看更多

1 楼 highjade 2008-08-25

不错，继续啊

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

SVG 编程第一步

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

SVG 编程第一步

评论

发表评论

相关推荐

use hibernate3-maven to export sql based on entity

uninstall mysql completely in my Mac X 10.6

my vimrc

使用HSQLDB来作EJB3 EntityBean到Unit Test要点

user xrandr to change my desktop's resolution

XSS的关键之列表

python查看方法帮助(from dive into python)

selenium 测试ajax的关键

RichFaces 手记

代码检查工具

CI工具hudson

创建solaris package step by step

什么是SVR4？我们为什么要选择SVR4？

IPS 中的pkg command学习笔记

On Board前的学习计划

YUI Grid CSS的优雅设计

我很懒，但是懒人有懒办法

当XPath遇上NameSpace

ubuntu下安装ipmsg-飞鸽传书

sudo 执行时无密码(不安全)

最近访客更多访客>>