17SVG网页前端/web开发工程师
一、SVG介绍
二、SVG绘制矢量图形
HTML xmlns 属性
xmlns 属性
xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL，它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。
例如，如果需要使用符合 XML 规范的 XHTML 文档，则应该在文档中的<html> 标签中至少使用一个 xmlns 属性，以指定整个文档所使用的主要命名空间：
<html xmlns="http://www.w3.org/1999/xhtml">
如果需要在一个 div 元素中显示一串数学公式，则可以为该 div 元素定义一个数学命名空间。比如这样：
<div xmlns="http://www.w3.org/1999/Math/MathMl">x3/x</div>
如果您不希望在每次显示除法公式时都在 div 元素中定义 xmlns 属性，那么更好的办法是在文档的开头处定义具有前缀的命名空间：
<html xmlns="http://www.w3.org/1999/xhtml">
xmlns:math="http://www.w3.org/1999/Math/MathMl">
然后，您就可以在 div 中使用该前缀了，就像这样：
<math:div>x3/X<div>
虽然在大多数情况下，绝大多数 XHTML 作者都不需要定义多个命名空间，但是您仍然有必要理解存在着多个命名空间，以便在需要选择将基于某个 DTD 的内容嵌入其他 DTD 定义的内容中时，可以管理多个命名空间。
2.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
<circle cx="60" cy="60" r="50"></circle>
</svg>
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="30" cy="30" r="20"/>
<circle cx="70" cy="70" r="20"/>
</clipPath>
</defs>
<rect x="10" y="10" width="100" height="100"
clip-path="url(#myClip)"/>
</svg>
</body>
</html>
三、引入SVG外部文件
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="index.svg" width="1000px" height="1000px" frameborder="no"></iframe>
</body>
</html>
<?xml version="1.0"?>
<svg width="100%" height="100%" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
<!-- Show outline of the viewport using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="black" stroke-width="2" />
</svg>
1914篇文章
