注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】SVG初探 - 创建SVG图片  

2014-11-07 13:12:41|  分类: HTML5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自独行冰海《SVG初探 - 创建SVG图片》
SVG初探 - 创建SVG图片
之前一直在使用Canvas绘图,这段时间研究了一下SVG。说实话,SVG的研究比Canvas要难很多。主要原因在于,压根没有合适的中文文档,想把知识点掌握的前提,是把英文文档翻译过来。在讲解方法之前,先说说SVG的基本知识以及创建SVG的基本方法:

SVG是什么
W3C推荐的网页图形格式,类似于Flash,SVG是一种描述二维矢量图形的标记语言,但它是一种开发的以XML为基础的语言,不是一种私有语言。

SVG的支持程度
IE8-以及Android 2.3默认浏览器是不支持SVG的

对SVG的基本理解
可以把SVG想象成类似于HTML的图形,可以与其他浏览器技术,如JavaScript、CSS、DOM无缝集合

为何使用SVG-SVG的优势
1、开发者可以使用任何简单的文本/网页编译器进行创建和修改。不需要Flash、PhotoShop、Paint等软件。
2、与像素无关,可以放大或者缩小,甚至打印成任意大小,图片质量不会改变。

创建SVG图片
方法1:使用外部引入SVG的方式
SVG是一个以.svg结尾的文本格式的文件,可以将这个文件以普通图片的方式嵌入到DOM当中,
<object data="XXX.svg" type="image/svg+xml" />
SCG文件的编辑
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>

书写的SVG-demo

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
<circle cx="350" cy="180" r="20" fill="black" />
<circle cx="450" cy="180" r="20" fill="black" />
<clipPath id="faceClip">
<rect x="300" y="240" width="220" height="60" />
</clipPath>
<circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</svg>

方法2:
在HTML中直接使用SVG,示例demo:

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
<circle cx="350" cy="180" r="20" fill="black" />
<circle cx="450" cy="180" r="20" fill="black" />
<clipPath id="faceClip">
<rect x="300" y="240" width="220" height="60" />
</clipPath>
<circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</g>
</svg>

今天就先讲解SVG的基本用法,下一篇文章当中,我们再具体分析SVG的属性和方法(可以绘画的线型等)
欢迎互相沟通交流~独行冰海
  评论这张
 
阅读(65)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017