-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
诗诗
2018-03-12
来源 ：网络
阅读 854
评论 0
摘要：SVG(Scalable Vector Graphics):可缩放矢量图形，一种二维图形表示语言。这篇HTML5教程将详解这个问题。
SVG(Scalable Vector Graphics):可缩放矢量图形，一种二维图形表示语言。这篇HTML5教程将详解这个问题。
借助SVG，我们可以实现很多同Canvas API类型的绘制操作，但在Canvas元素上绘制文本的时候，字符会以像素的方式固定到上面。文本成为了图像的一部分，除非重新绘制Canvas绘制区域，否则无法改变文本内容。正因为如此，Canvas上面的文本无法被搜索引擎获取，而SVG上的文本却是可搜索的。例如，Google会对Web上的SVG内容中的文本进行索引。
在页面中添加SVG
内联方式：像HTML中的其它元素一样使用，在此基础上可以编写HTML，JavaScript和SVG的交互应用。
<body>
<svg width="200" height="200">
</svg></body>
外联方式：通过<img>元素，在HTML导入外部SVG文件，缺点是无法编写与SVG元素进行交互的脚本。
<img src="example.svg" />
简单的形状
SVG包含了基本的形状元素，如矩形、圆形和椭圆。形状元素的尺寸和位置被定义成了属性。矩形的属性有width和height。圆形有一个表示半径的r属性。它们都应用CSS语法表示距离，因此单位包括了px 、point 、em等。
矩形：x="50" y="20"表示矩形的起点为(50,20)
<body>
<svg width="200" height="200">
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
</svg></body>
SVG绘制开关对象是按对象文档中出现的顺序进行的。如果我们在画完矩形之后再画圆，那么圆形会显示在矩形之上。
增加一个圆形：
<body>
<svg width="200" height="200">
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
</svg></body>
变换SVG元素
SVG中可以将多个元素结合起来，使它们形成一个组，变为一个整体。
<g>元素代表“组”，可以用来结合多个相关的元素。组内成员可以由通过ID来引用。些外，组也可以作为一个整体进行变换。如果你为组添加了变换属性，那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。
<svg width="200" height="200">
<g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
</g>
</svg>
复用内容
SVG中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。借助这两个元素，你可以多次复用同一内容，消除冗余。
<svg width="200" height="200">
<defs>
<g id="ShapeGroup">
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
</g>
</defs>
<use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.4)"></use>
<use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.75)"></use>
<use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"></use>
</svg>
图案和渐变
<defs>
<pattern id="GravelPattern" patternContentUnits="userSpaceOnUse"
x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
<image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" />
</pattern>
<%--渐变--%>
<linearGradient id="RedBlackGradient">
<stop offset="0%" stop-color="#000"></stop>
<stop offset="100%" stop-color="#f00"></stop>
</linearGradient>
</defs>
<rect x="0" y="20" width="100" height="80" stroke="red"
fill="url(#RedBlackGradient)" />
<circle cx="120" cy="80" r="40" stroke="#00f"
stroke-width="8" fill="url(#GravelPattern)" />
</svg>
路径
SVG不公包含简单的形状，还包含自由形态的路径。path元素有一个d属性，代表路径数据。在d的值中，M代表移至(Move to)，L代表划线至(Line to),Q代表二次曲线，Z代表闭合路径。
<svg width="200" height="200">
<path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z" />
</svg>
文本
SVG中文本有点类型于CSS中对于样式的定义
<svg width="200" height="200">
<text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
font-size="40px" font-weight="bold">Hello SVG</text>
</svg>
希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
