From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/svg/tutorial/getting_started/index.html | 96 ++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 files/zh-cn/web/svg/tutorial/getting_started/index.html (limited to 'files/zh-cn/web/svg/tutorial/getting_started') diff --git a/files/zh-cn/web/svg/tutorial/getting_started/index.html b/files/zh-cn/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..343a468a5b --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,96 @@ +--- +title: 入门 +slug: Web/SVG/Tutorial/Getting_Started +tags: + - SVG + - SVG教程 + - 起步 +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

+ +

一个简单的示例

+ +

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

+ +
<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">SVG</text>
+
+</svg>
+
+ +

复制并粘贴代码到文件demo1.svg。然后用Firefox打开该文件。 它将会呈现为下面的截图。(Firefox用户点击这里)

+ +

svgdemo1.png

+ +

绘制流程包括以下几步：

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

SVG文件的基本属性

+ + + +

SVG 文件类型

+ +

SVG文件有两种形式。普通SVG文件是包含SVG标记的简单文本文件。推荐使用“.svg”（全部小写）作为此类文件的扩展名。

+ +

由于在某些应用（比如地图应用等）中使用时，SVG文件可能会很大，SVG标准同样允许gzip压缩的SVG文件。推荐使用“.svgz”（全部小写）作为此类文件扩展名 。不幸的是，如果服务器是微软的IIS服务器，使gzip压缩的SVG文件在所有的可用SVG的用户代理上可靠地起作用是相当困难的，而且Firefox不能在本地机器上加载gzip压缩的SVG文件。 除非知道处理发布内容的web服务器可以正确的处理gzip，否则要避免使用gzip压缩的SVG。

+ +

关于web服务器的小提示

+ +

如果你已经知道了如何创建基本SVG文件，下一步就是把它们上传到web服务器，但是在这阶段有一些陷阱。对于普通SVG文件，服务器应该会发送下面的HTTP头：

+ +
Content-Type: image/svg+xml
+Vary: Accept-Encoding
+ +

对于gzip压缩的SVG文件，服务器应该会发送下面的HTTP头：

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding
+ +

可以利用Network Monitor panel或者web-sniffer.net之类的网站来检查服务器是否给SVG文件发送正确的HTTP头，向web-sniffer.net提交你的一个SVG文件的链接，然后查看HTTP 响应头。如果发现服务器没有发送上述的响应头部值，那么你应该联系你的服务器供应商。如果不能说服他们为SVG修正服务器配置，可能还有一些我们可以自行解决的办法。 请阅读SVG维基的server configuration page以找到一些简单的解决方案。

+ +

服务器配置错误是SVG加载失败的常见原因，所以一定要确保你的服务器配置正确。如果不能把服务器配置成给SVG文件发送正确的响应头，这时Firefox很有可能把该文件的标记显示成文本或乱码，甚至会要求查看者选择打开文件的应用程序。

+ +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

+ +

{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}

-- cgit v1.2.3-54-g00ecf