简单范例

让我们直接从一个简单的例子开始，看一下下面代码：

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">饥人谷</text>

</svg>

复制并粘贴代码到文件demo1.svg。然后用浏览器打开该文件，会看到如下效果。你也可以把代码拷贝到一个 html 的 body 里，同样会看到效果

绘制流程包括以下几步：

  1. 从svg根元素开始：
    • 应舍弃来自 (X)HTML的doctype声明，因为基于SVG的DTD验证导致的问题比它能解决的问题更多。
    • 属性version和属性baseProfile属性是必不可少的，供其它类型的验证方式确定SVG版本。
    • 作为XML的一种方言，SVG必须正确的绑定命名空间 （在xmlns属性中绑定）。 请阅读命名空间速成 页面获取更多信息。
  2. 绘制一个完全覆盖图像区域的矩形 <rect/>，把背景颜色设为红色。
  3. 一个半径80px的绿色圆圈<circle/>绘制在红色矩形的正中央 （向右偏移150px，向下偏移100px）。
  4. 绘制文字“SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。

SVG 的使用

有几种使用 SVG 的方式

直接嵌入到 HTML 中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <svg version="1.1" width="300" height="200">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="150" cy="100" r="80" fill="green" />
    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">饥人谷</text>
  </svg>
</body>
</html>

img 标签引入svg文件

<img src="logo.svg">

CSS背景图片引入

.logo {
  background: url(logo.svg)
}

object 元素引入 svg 文件

<object data="image.svg" type="image/svg+xml" />

iframe 元素引用SVG文件

不建议使用

<iframe src="image.svg"></iframe>

results matching ""

    No results matching ""