📄 xml 问题使用 svg 编程 - fanqiang_com.htm

📁 详细的讲述了XML相关知识
💻 HTM
📖 第 1 页 / 共 2 页
字号:
12 下一页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0064)http://fanqiang.chinaunix.net/program/html/2005-05-20/3264.shtml -->
<HTML><HEAD><TITLE>XML 问题: 使用 SVG 编程 - fanqiang.com</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
	FONT: 12pt 宋体
}
TH {
	FONT: 12pt 宋体
}
INPUT {
	FONT: 12pt 宋体
}
SELECT {
	FONT: 12pt 宋体
}
TEXTAREA {
	FONT: 12pt 宋体
}
SELECT {
	FONT: 12pt 宋体
}
checkbox {
	FONT: 12pt 宋体
}
A:link {
	COLOR: #e6a306; TEXT-DECORATION: underline
}
A:visited {
	COLOR: #e6a306; TEXT-DECORATION: underline
}
A:hover {
	COLOR: #ffff00; TEXT-DECORATION: underline
}
BODY {
	FONT-SIZE: 12pt; FONT-FAMILY: "宋体", "serif"
}
TD {
	FONT-SIZE: 12pt; FONT-FAMILY: "宋体", "serif"
}
P {
	FONT-SIZE: 9pt; LINE-HEIGHT: 150%
}
</STYLE>

<META content="MSHTML 6.00.2800.1505" name=GENERATOR></HEAD>
<BODY text=#ffffff bgColor=#000000 leftMargin=0 
background="XML 问题 使用 SVG 编程 - fanqiang_com.files/bline.gif" topMargin=5 
onload=setTailPosition() marginwidth="0" marginheight="5">
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=750 border=0>
  <TBODY>
  <TR>
    <TD height=45>
      <P align=center><IMG alt="[ 永远的UNIX::UNIX技术资料的宝库 ]" 
      src="XML 问题 使用 SVG 编程 - fanqiang_com.files/title.gif"> </P></TD></TR>
  <TR>
  <TR>
    <TD vAlign=bottom align=left height=40><SMALL><A 
      href="http://fanqiang.chinaunix.net/">首页</A> &gt; 编程技术 &gt; <A 
      href="http://fanqiang.chinaunix.net/program/html/index.shtml">HTML/JS/XML</A> 
      &gt; 正文</SMALL></TD></TR>
  <TR>
    <TD width="100%" bgColor=#d09f0d colSpan=5 height=2><IMG height=1 
      src="XML 问题 使用 SVG 编程 - fanqiang_com.files/c.gif" 
width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=750 border=0>
  <TBODY>
  <TR>
    <TD vAlign=top align=middle><BR>
      <TABLE cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
        <TBODY>
        <TR>
          <TH class=f24>
            <H1>XML 问题: 使用 SVG 编程</H1></TH></TR>
        <TR>
          <TD align=middle height=20><FONT color=#999999><SMALL>作者：David Mertz 
            IBM DW中国 (2005-05-20 15:21:48)</SMALL></FONT></TD></TR>
        <TR>
          <TD><BR></TD></TR>
        <TR>
          <TD height=15></TD></TR>
        <TR>
          <TD class=l17><FONT class=f14 id=zoom><FONT color=#cccccc><!-- 正文begin --><!--StartFragment -->
            <BLOCKQUOTE>可缩放矢量图形（Scalable Vector Graphics，SVG）是一种用于描述与比例无关的图形的 
              XML 格式，可以很好地支持免费软件和商业工具。在本期文章中，David 将介绍使用 SVG 编写脚本和动画，还将涉及通过 DOM 
              处理 SVG 等内容。SVG 由于是 XML 格式，因此可以支持通常用 XML 工具和库进行的转换和生成。</BLOCKQUOTE>
            <P>在 SVG 于 2001 年左右首次出现以前，已有相当多功能强大的矢量图形格式。Postscript 及其类似产品 PDF 
            广泛应用于许多应用程序。其他特定于应用程序的格式包括基于 Postscript 的 Adobe Illustrator 
            (.ai)、CorelDRAW (.cdr)、Computer Graphics Metafile (.cgm)、Windows 
            Metafile (.wmf)、Autocad (.dxf)、Hewlett-Packard Graphics Language 
            (.hpgl)、WordPerfect (.wpg) 等。对于甚至可以组合动画、声音和交互性的矢量绘图，则常使用 Macromedia 
            的 SWF/Flash 在万维网上发布相关内容。</P>
            <P>SVG 与所有其他格式的主要区别在于，前者是 XML 的一个应用程序。尽管对于同等的图形，使用 SVG 
            描述比使用多数其他矢量格式描述要复杂得多，但对于编程操作而言，SVG 则是一种更通用的工具。尤其是，您可以在使用 ECMAScript 
            和其他文档对象模型 (DOM) 的 Web 浏览器（或其他应用程序）中操纵 SVG。而且同样重要的是，您可以使用熟悉的 XML 技术（如 
            XSLT）或 XML 支持库转换和生成 SVG。可以将 SVG 与其他使用名称空间的 XML 格式混合。而且，甚至可以使用层叠样式表 
            (CSS) 限定 SVG 的样式。总之，在 XML 和 Web 空间，SVG 是一个友好的播放器。</P>
            <P>除了是 XML 格式以外，SVG 还是一个由 W3C 发布的完全开放的标准（请参阅 <A 
            href="http://www-128.ibm.com/developerworks/cn/xml/x-matters40/#resources" 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">参考资料</A>）。与上述多数矢量格式不同，SVG 
            是完全免费的，没有任何版权或专利权限制，而且其规范<I 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">完全 
            </I>有文档记录。与其他 W3C 标准类似，规范文档本身<I 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">是</I> 受版权保护的 
            —— 但根据 W3C 的非限制性条款的规定，允许广泛传播以及免费复制和使用（例如，规范中没有附带禁止公开协议）。</P>
            <P><A name=IDA5CMX><SPAN 
            class=atitle2>入门</SPAN></A><BR>令人高兴的是，您可以在多数新式 Web 浏览器中查看 
            SVG，可以在本机也可以通过插件查看。精确的支持状态在不断变动，但通过正确的技术，您应能够使用 
            Firefox/Mozilla、KHTML（Konqueror 和 Safari）、Opera 或 Amaya 查看 SVG。使用 
            Adobe 或 Corel 的插件，甚至还可以让 Internet Explorer 显示 SVG。还存在一些独立的 SVG 
            查看器，特别是使用免费软件 Batik SVG 工具包（是 Apache XML 项目的一部分 —— <A 
            href="http://www-128.ibm.com/developerworks/cn/xml/x-matters40/#resources" 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">请参阅“参考资料”</A>)。</P>
            <P>在许多情况下，SVG 文件是作为独立的文档查看的。在这样的情况下，这些文件表现为 MIME 类型 
            <CODE>image/svg+xml</CODE>，并通常有一个文件扩展名 .svg。Gzip 压缩的 SVG 文件应有扩展名 
            .svgz，可由多数启用 SVG 的工具直接支持。SVG 文件只是具有适当 DTD 的 XML 
            文件。您将在下面几个例子中了解到这一点。</P>
            <P>然而，可能更为常见的是，您可以将一个 SVG 文档嵌入较大的文档中，特别是嵌入 XHTML 页。其他复合 XML 格式（如 
            OASIS OpenDocument）也可以（或将支持）将 SVG 嵌入其中。将 SVG 图形嵌入 (X)HTML 
页有三种方式：</P>
            <UL xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
              <LI>通过 <CODE>&lt;object&gt;</CODE> 标签 
              <LI>通过 <CODE>&lt;embed&gt;</CODE> 标签 
              <LI>作为嵌入的名称空间</LI></UL>
            <P>不过，具体使用哪一种方式有效取决于您的浏览器和版本。例如，我创建了下面的 XHTML 文档（使用 doctype 
            来支持名称空间嵌入）： </P><A name=code1><B>清单 1. XHTML 文档 
            (svg-nested.html)</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=5 width="100%" bgColor=#cccccc 
            border=1>
              <TBODY>
              <TR>
                <TD><PRE><CODE>
&lt;?xml version="1.0" standalone="no"?&gt;
&lt;!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"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;SVG as embedded object and nested namespace&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;Object tag&lt;/h2&gt;
&lt;object type="image/svg+xml" data="standalone.svg"&gt;
Your browser is currently unable to display SVG images.
&lt;/object&gt;
&lt;h2&gt;Nested namespace&lt;/h2&gt;
&lt;svg:svg version="1.1" width="5cm" height="4cm"
      xmlns:svg="http://www.w3.org/2000/svg"&gt;
  &lt;svg:title&gt;Four rectangles&lt;/svg:title&gt;
  &lt;svg:rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/&gt;
  &lt;svg:rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/&gt;
  &lt;svg:rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/&gt;
  &lt;svg:rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/&gt;
  &lt;!-- Show outline of canvas using 'rect' element --&gt;
  &lt;svg:rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
       fill="none" stroke="blue" stroke-width=".02cm" /&gt;
&lt;/svg:svg&gt;
&lt;h2&gt;Embed tag&lt;/h2&gt;
&lt;embed id="svg3" src="standalone.svg" /&gt;
&lt;/body&gt;
&lt;/html&gt;
</CODE></PRE></TD></TR></TBODY></TABLE>
            <P>通过尝试，Safari/KHTML 在浏览器中表现最好。尽管如此，如果文件使用 .html 扩展名，而不是 .xml 扩展名<I 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">命名</I>，结果会更好。总之，<CODE>&lt;embed&gt;</CODE> 
            也许是最成功的方法。您可能会看到文档呈现为：</P>
            <P><A name=fig1><B>图 1. Web 浏览器显示的 svg-nested.html</B></A><BR><IMG 
            height=415 alt="Web 浏览器显示的 svg-nested.html" 
            src="XML 问题 使用 SVG 编程 - fanqiang_com.files/svg-in-html.jpg" 
            width=167 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"></P>
            <P>另外，本文提供的示例是组合基本形状、文本、颜色等内容的较为简单的示例 —— 但 SVG 
            完全能够表现复杂和引人入胜的绘图。为了提高读者的兴趣，下面是 Ghostscript 和其他工具中包括的著名的 PostScript 
            老虎图片，它使用 SVG 呈现（我仅调整了它的总体大小）：</P>
            <P><A name=fig2><B>图 2. Web 浏览器将老虎图像显示为 SVG</B></A><BR><IMG 
            height=268 alt="Web 浏览器将老虎图像显示为 SVG" 
            src="XML 问题 使用 SVG 编程 - fanqiang_com.files/tiger-safari.jpg" 
            width=392 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"></P>
            <P><A name=IDAMFMX><SPAN class=atitle2>SVG 文档的特点</SPAN></A><BR>前面的 
            XHTML 例子（参阅 <A 
            href="http://www-128.ibm.com/developerworks/cn/xml/x-matters40/#code1" 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">清单 
            1</A>）为您显示了非常基本的 SVG 绘图。引用的外部文件 (standalone.svg) 所包含的元素与 XHTML 
            中嵌入的相同，只是去掉了标签中额外的名称空间限定符。SVG 为您提供了许多图形元件，而且每个图元都有可以进一步指定图形的多种 XML 
            属性：颜色、大小、位置、填充、轮廓等。不过，直观的图形元件（如椭圆、矩形或多边形）或者一些可能包括立方体或二次贝塞尔曲线等的更为复杂的 
            <CODE>&lt;path&gt;</CODE> 元素，常常包括在 <CODE>&lt;g&gt;</CODE> 
            元素中，以便将若干个图元组合在一起。<CODE>&lt;g&gt;</CODE> 
            组的优点是，您可以对它进行整体缩放、移动、设定样式或修改。 对组的修改通用于其中的形状集合（包括嵌入的 
            <CODE>&lt;g&gt;</CODE> 组）。在编写 SVG 文档脚本时这特别有用。</P>
            <P><A name=IDAHGMX><SPAN class=atitle3>始终如一</SPAN></A><BR>有关 SVG 
            文档需要注意的一点是，它们并非<I 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">完全</I> 是真正的 
            XML。从语句上说，SVG 确实是 XML，但在 SVG 属性中，SVG 
            绘图信息内容的重要部分包含在逗号和空格分隔的数据中。这里所说的<I 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">信息内容</I> 并不是指 
            XML Infoset，仅指<I 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">它包含什么？</I>的更加非正式的概念。这样做是一种合理的折衷方法，因为对定义曲线的每个点或句柄都使用子元素将会使 
            SVG 更加繁琐。但是，XML 级处理技术（如 
            XSLT）因此能够不用真正处理太多的路径数据。例如，下面是一个二次贝塞尔曲线路径元素：</P>
            <TABLE cellSpacing=0 cellPadding=5 width="100%" bgColor=#cccccc 
            border=1>
              <TBODY>
              <TR>
                <TD><PRE><CODE>
&lt;path d="M200,300 Q400,50 600,300 T1000,300"
      fill="none" stroke="red" stroke-width="5"  /&gt;
</CODE></PRE></TD></TR></TBODY></TABLE>
            <P>下面是一个描述五角星形的多边形：</P>
            <TABLE cellSpacing=0 cellPadding=5 width="100%" bgColor=#cccccc 
            border=1>
              <TBODY>
              <TR>
                <TD><PRE><CODE>
&lt;polygon fill="red" stroke="blue" stroke-width="10"
          points="350,75  379,161 469,161 397,215
                  423,301 350,250 277,301 303,215
                  231,161 321,161" /&gt;
</CODE></PRE></TD></TR></TBODY></TABLE>
            <P><A name=IDA1GMX><SPAN class=atitle3>添加样式</SPAN></A><BR>前面提到过您可以使用 
            CSS 选择器和语法来修改 SVG 绘图的外观。对于 HTML 和其他支持 CSS 的格式，既可以指定内嵌 CSS 
            信息，也可以作为对外部样式表的引用。下面是一个非常简单的内嵌 CSS 的例子：</P><A name=code2><B>清单 2.一个 
            简单的 CSS 例子 (inline-styled.svg)</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=5 width="100%" bgColor=#cccccc 
            border=1>
              <TBODY>
              <TR>
                <TD><PRE><CODE>
&lt;?xml version="1.0" standalone="no"?&gt;
&lt;!-- By ref:
  &lt;?xml-stylesheet href="mystyle.css" type="text/css"?&gt;
--&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
12 下一页
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -
📄 xml 问题 使用 svg 编程 - fanqiang_com.htm

⌨️ 快捷键说明

📄 xml 问题使用 svg 编程 - fanqiang_com.htm
