Html5 的 SVG功能介绍

最新推荐文章于 2025-06-06 10:40:44 发布
转载 最新推荐文章于 2025-06-06 10:40:44 发布 · 3.9k 阅读 · 4
文章标签：

#html5 #safari #html #xml #image #javascript

本文介绍了SVG在HTML5中的使用方法，包括基本图形绘制、文字效果、动画及事件处理等，并提供了多个示例代码。
Html5 的 SVG功能介绍

在Html5中有两种绘图方式，一种是Canvas，一种是SVG ；在以前的Html5 canvas 标签 和 Html 5文字效果显示文章中都有介绍到，在这两篇文章示例中都有直接间接涉及到。在本文中将介绍SVG的图形绘制与使用。同样SVG也是矢量呈现（缩放矢量呈现），与Canvas有所不同，SVG是一种XML标记语言，它既可以单独保存以".svg"后缀的文件在浏览器中打开显示，也支持建立SVG标记直接嵌入在网页中显示，还可以通过<embed src="文件.svg" name="name自命" type="image/svg+xml" height="300" width="450">将SVG嵌入到页面中，和Canvas一样也可以响应脚本事件操作和控制，下面是相关示例展示。

SVG 的形状shapes ：rect、circle、ellipse、line、polyline和polygone，以及image

在SVG中绘制呈现图形物体，有rect/矩形(方形) 、circle/圆形、ellipse/椭圆、line/线、polyline/多边交叉线和polygone/多边形可以使用，在Html页面中以<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg"></svg>格式建立SVG标签，然后在标签里面进行绘制。下面是呈现矩形和圆形椭圆效果。

 

 

HTML SVG 代码  复制 
   

    
    <
    body 
    >
    
    
    <
    svg 
    width
    ="300"
     height
    ="250"
     xmlns
    ="http://www.w3.org/2000/svg"
    >
    
        
    <
    rect 
    x
    ="5"
     y
    ="5"
     width
    ="60"
     height
    ="60"
     fill
    ="green"
    />
    
        
    <
    rect 
    x
    ="70"
     y
    ="5"
     rx
    ="5"
     ry
    ="5"
     width
    ="60"
     height
    ="60"
     fill
    ="red"
    />
    
        
    <
    circle  
    cx
    ="165"
     cy
    ="35"
     r
    ="30"
     fill
    ="orange"
    />
    
        
    <
    ellipse 
    cx
    ="230"
     cy
    ="35"
     rx
    ="30"
     ry
    ="20"
     fill
    ="blue"
    />
    
    
    </
    svg
    >
    

    </
    body
    >

效果如下

接着展示line/线、polyline/多边交叉线和polygone/多边形效果，以及image的使用。按照上面的svg方式建立标签，定义标签对象，在image标签中指定图片。下面是详细svg代码。

HTML SVG 代码  复制 
   

    
    <
    body 
    >
    
     
    <
    svg 
    width
    ="300"
     height
    ="250"
     xmlns
    ="http://www.w3.org/2000/svg"
    >
    
          
    <
    line 
    y2
    ="116"
     x2
    ="100"
     y1
    ="67"
     x1
    ="25"
     stroke-width
    ="5"
    
           stroke
    ="#ff0000"
     fill
    ="none"
    />
    
          
    <
    path 
    d
    ="m263,49l-9,76l82,-48l-123,-13l50,-15z"
     stroke-width
    ="5"
    
           stroke
    ="#000000"
     fill
    ="#ff7f00"
    />
    
          
    <
    polyline 
    stroke-width
    ="6"
     fill
    ="none"
     stroke
    ="#3f7f00"
     
          points
    ="121,53 192,124 121,124 192,53 "
    />
    
          
    <
    image 
    xlink:href
    ="image/DSCF9984580100.png"
      x
    ="360"
     y
    ="30"
     
          width
    ="100"
     height
    ="100"
     
    />
    
    
    </
    svg
    >
    

    </
    body
    >

效果如下

SVG 的text/文字效果

svg的text标签支持渐变填充，也支持文字拾取曲线排列文字，需要预先定义渐变填充在<defs></defs>中，当文字拾取路径排列是也需要在<defs></defs>中预先定义。下面是详细代码示例展示。

HTML SVG 代码  复制 
   

    
    <
    svg 
    width
    ="300"
     height
    ="250"
     xmlns
    ="http://www.w3.org/2000/svg"
    >
    

    <
    defs
    >
    
        
    <
    linearGradient 
    y2
    ="1"
     x2
    ="1"
     y1
    ="0"
     x1
    ="0"
     id
    ="svg_8"
    >
    
        
    <
    stop 
    stop-color
    ="#ff0000"
     offset
    ="0"
    />
    
        
    <
    stop 
    stop-color
    ="#ffff00"
     offset
    ="1"
    />
    
        
    </
    linearGradient
    >
    
    
    </
    defs
    >
    

    <
    text 
    font-weight
    ="bold"
     font-style
    ="normal"
     xml:space
    ="preserve"
     
text-anchor
    ="middle"
     font-family
    ="Arial Black"
     font-size
    ="24"
     
id
    ="svg_7"
     y
    ="53"
     x
    ="107"
     stroke-width
    ="0"
     stroke
    ="#000000"
    
fill
    ="url(#svg_8)"
    >
    weisim3.com
    </
    text
    >
    
  
    
    <
    defs
    >
    
    
    <
    path  
    d
    ="m220.98885,39.69102c84.91158,149.91641 
    241.80937,-74.29949 260.99889,5.65374"
    
    fill
    ="black"
     transform
    ="rotate(-0.474251, 351.488, 60.1133)"
     
    id
    ="fontPath"
    />
    

    </
    defs
    >
    

    <
    text 
    fill
    ="url(#svg_8)"
    >
    
    
    <
    textPath 
    xlink:href
    ="#fontPath"
    >
    
        www.weisim3.com 22.11.2011 - Html5 SVG
    
    </
    textPath
    >
    

    </
    text
    >
    

    </
    svg
    >

效果如下

SVG 的鼠标事件和动画

SVG可以直接支持动画和鼠标触发事件，也支持javascript脚本响应事件，在本文仅在介绍SVG标签中的鼠标事件和动画。click事件<set attributeName="fill" to="red" begin="click"/>，在SVG中触发click事件，attributeName是类型这里fill是指填充，to="red"是点击之后填充为红色，attributeName支持visibility、opacity、width等属性。动画<animateMotion from="0,260" to="180,100" dur="5s" fill="freeze"/>，这里动画from="0,260"为平面坐标点，x轴为0，y轴为260；to="180,100"则是动画移动到"180,100"位置；dur="5s"为帧速。动画<animateTransform>为自由变换如图形旋转、缩放主要用此属性，下面是动画鼠标事件详细代码。

 

<body><svg width="300" height="250" xmlns="http://www.w3.org/2000/svg"> <circle  cx="60" cy="35" r="30" fill="green"> <set attributeName="fill" to="red" begin="click"/> </circle> <rect x="100" y="10" width="40" height="50" fill="orange">   <animate attributeName="width" dur="5s" from="10px" to="20px"      accumulate="sum" additive="sum" repeatCount=="180,100"        dur="5s" fill="freeze"/>    </rect></svg><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect fill="#AFBCC7" stroke="blue" stroke-width="5px" x="200px"     y="100px" width="60px" height="60px">    <animateTransform        attributeType="XML"        attributeName="transform"        type="rotate"        from="0,150,150" to="360,150,150"        begin="0s" dur="5s"        repeatCount="indefinite"/>    </rect>     <circle fill="#c5ff86" stroke="#38521d" stroke-width="5px"       cy="37" cx="148" r="30" >            <animateTransform            attributeType="XML"            attributeName="transform"            type="scale"            from="0" to="1"            dur="5s"            fill="freez

HTML 代码  复制 
  

   
   <
   body
   >
   

   <
   svg 
   width
   ="300"
    height
   ="250"
    xmlns
   ="http://www.w3.org/2000/svg"
   >
   
 
   <
   circle  
   cx
   ="60"
    cy
   ="35"
    r
   ="30"
    fill
   ="green"
   >
   
 
   <
   set 
   attributeName
   ="fill"
    to
   ="red"
    begin
   ="click"
   />
   
 
   </
   circle
   >
   
 

   <
   rect 
   x
   ="100"
    y
   ="10"
    width
   ="40"
    height
   ="50"
    fill
   ="orange"
   >
   
   
   <
   animate 
   attributeName
   ="width"
    dur
   ="5s"
    from
   ="10px"
    to
   ="20px"
   
      accumulate
   ="sum"
    additive
   ="sum"
    repeatCount
   ="10"
    begin
   ="click"
    
   />
   

   </
   rect
   >
    

 
   <
   rect 
   fill
   ="orange"
    stroke
   ="red"
    stroke-width
   ="5px"
   
     x
   ="0px"
    y
   ="0px"
    width
   ="115px"
    height
   ="115px"
   >
   
    
   <
   animateMotion 
   from
   ="0,260"
    to
   ="180,100"
   
        dur
   ="5s"
    fill
   ="freeze"
   />
   
    
   </
   rect
   >
   

   </
   svg
   >
   


   <
   svg 
   width
   ="300"
    height
   ="300"
    xmlns
   ="http://www.w3.org/2000/svg"
    
   >
   

   <
   rect 
   fill
   ="#AFBCC7"
    stroke
   ="blue"
    stroke-width
   ="5px"
    x
   ="200px"
    
    y
   ="100px"
    width
   ="60px"
    height
   ="60px"
   >
   
    
   <
   animateTransform
        
   attributeType
   ="XML"
   
        attributeName
   ="transform"
   
        type
   ="rotate"
   
        from
   ="0,150,150"
    to
   ="360,150,150"
   
        begin
   ="0s"
    dur
   ="5s"
   
        repeatCount
   ="indefinite"
   />
   
    
   </
   rect
   >
   

     
   <
   circle 
   fill
   ="#c5ff86"
    stroke
   ="#38521d"
    stroke-width
   ="5px"
    
      cy
   ="37"
    cx
   ="148"
    r
   ="30"
    
   >
   
    
        
   <
   animateTransform
            
   attributeType
   ="XML"
   
            attributeName
   ="transform"
   
            type
   ="scale"
   
            from
   ="0"
    to
   ="1"
   
            dur
   ="5s"
   
            fill
   ="freeze"
   />
   
    
   </
   circle
   >
   

   </
   svg
   >
    

   </
   body
   >

 

效果如下

目前SVG支持最好的是Firefox和 Google的Chrome，IE浏览器是9.0开始支持SVG，Safari也支持，目前IE和Safari对SVG的动画和事件触发不能全部支持。从这些示例中看可以在html5中图形图像矢量呈现完全无需flash的嵌入即可达到同样的效果。只是目前阶段SVG的动画还有兼容问题， SVG相比Canvas它支持直接从表示XML中定义对象图像，这从上面的事例中以看到，Canvas目前是通过Javascript定义，Canvas目前的动画事件触发基本支持所有最新版的浏览器。另外可以使用Google上有个svg-edit在线SVG编辑器http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html，此外Adobe的Illustrator也可以绘制svg，不久可能将会在更多html编写工具中将会集成这一可视化编辑功能。

 

mtfsoft
关注
html5 svg 中元素点击事件添加方法
12-13
最近在用svg的点击事件做东西，之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件，他们之间详细的区别如下： Canvas 与 SVG 的比较（详见） 下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas •依赖分辨率 •不支持事件处理器 •弱的文本渲染能力 •能够以 .png 或 .jpg 格式保存结果图像 •最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序（比如谷歌地图） •复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） •不适合游戏应用 做出的网页在
HTML5 SVG彩色爱心圆圈背景动画特效
06-11
HTML5是一种先进的网页标记语言，它为网页开发者提供了更强大的功能和更丰富的用户体验。SVG（Scalable Vector Graphics）是HTML5中一个重要的图形元素，它支持矢量图，这意味着图像无论放大多少倍都能保持清晰，这...
HTML5中的SVG的介绍
五天零一夜的寂寞
09-24 878
什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通
HTML5 SVG API及实例 SVG的特点
weixin_39557219的博客
08-06 968
什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通
html用svg事件,javascript-将SVG添加到HTML并处理事件
weixin_27310417的博客
06-09 806
我有这个SVG文件.显示不同的svg元素(圆形,Eclipse,多边形,折线等)每个元素都有自己的ID.单击该特定ID时,可以添加功能(onClick或MouseClicK).有什么方法可以添加一个通用函数(在JavaScript或Jquery中),该函数可以响应click事件并告诉我们click是从哪个对象(ID)发出的？所以我需要：> HTML代码以添加/引用SVG文件.不知道我使用SV...
精选资源
HTML5 SVG弹性Tooltip提示框特效
06-24
本项目"HTML5 SVG弹性Tooltip提示框特效"利用SVG的强大功能，创建了一种独特且吸引人的用户界面元素——Tooltip。Tooltip通常用来在鼠标悬停在特定元素上时显示额外信息，它为用户提供了一种简洁的交互方式。而这个...
精选资源
html5 svg逼真水波纹动画特效
07-28
HTML5和SVG（可缩放矢量图形）是现代网页开发中的重要技术，它们共同为创建高质量、交互式的视觉效果提供了强大的工具。本教程将深入探讨如何利用HTML5的SVG和相关的JavaScript库来实现逼真的水波纹动画特效。 首先...
精选资源
HTML5 SVG星级评分动画特效
07-31
HTML5与SVG技术在网页设计和开发中扮演着至关重要的角色，它们为创建交互式、动态和富有表现力的用户体验提供了强大的工具。本教程将详细探讨如何利用HTML5的SVG（可缩放矢量图形）特性来实现一款创新且个性化的五角...
精选资源
html5 svg点击购物车图标动态效果特效代码
03-20
HTML5是超文本标记语言的第五个版本，它引入了许多新特性，如离线存储、拖放功能、媒体元素（audio、video）、 canvas画布以及SVG（可缩放矢量图形）等。SVG是一种基于XML的图像格式，用于创建清晰的、高质量的、可...
html svg 点击事件失效_想做SVG但不会改代码？来用动画功能呀！
weixin_31474035的博客
12-27 613
嘿，胖友们大家好呀，我是小三儿最近这段时间，SVG推文大热，135编辑器也是新上架了数十款热门SVG样式，三儿的教程也是一波接着一波的出。为了让胖友们更快捷的对SVG样式进行设置，135编辑器也进行了一波大改动，在专业版菜单栏中增加了『动画』选项，我们目前所有的教程都是在『动画』菜单栏中进行设置的。那么问题来了，不少胖友对动画功能还是有点没搞懂，『动画』按钮到底在哪里？『动画』设置到底有...
svg 点击 事件_原生JS + SVG 小游戏
weixin_39672979的博客
12-10 1276
游戏在线地址https://oreillymedia.github.io/Using_SVG/ch18-interaction-files/circle-click-game.svg基本的HTML文件结构<html> <body> <svg id="gameboard" /> <div> 剩余时间: <span...
利用svg点击屏幕时有随机大小，颜色的圆出现
weixin_44833341的博客
07-01 180
<svg width="900" height="900"></svg> //js部分 <script> var svg = document.getElementsByTagName('svg')[0] svg.onclick = function (e) { var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle') //鼠标点击时的...
svg矢量图标在html中的使用, （知识点：1.通过h5中的css实现点击变色，2.一个svg文件包含多个图标)...
weixin_30267691的博客
10-12 525
svg矢量文件体积小，不变形，比传统的png先进，比现在流行的icon-font灵活。然而在使用过程中还是遇到了很多坑。今天花了一天时间把经验整理出来，以供后来者借鉴。如果您从本文收益，请留言mark一下。 这里我们要实现的功能是，一个svg文件包含多个图形，这样的好处是，网络请求次数少，加载快速。否则一个网页有10个图标就要请求10次。 一、制作svg 1.用记事本新建一个mysvg...
4.SVG 矩形（rect）
liuhao9999的博客
03-28 3396
SVG 形状（Shapes） 就像画板应用一样，SVG为开发者提供了一些预定义的形状元素，以便于快速应用： 方形 <rect> 圆形 <circle> 椭圆 <ellipse> 线条 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 后续章节我们将逐个介绍这些图形元素，先从方形及其一些变体开始。 由于SVG代码可读性较高，我们就使用实例代码结合代码解释的方式来学习。
展示SVG图，且实现点击事件和全屏展示
最新发布
Alaina_xiaoxu的博客
06-06 238
CSS 样式使得SVG图铺满，多余的可下滑查看。JS样式，处理SVG代码增加点击事件和全屏展示。html展示 可下滑查看。
svg鼠标响应事件的四种方法(其中两种可支持火狐)
仓
10-10 2233
 svg鼠标响应事件的四种方法鼠标响应事件的四种方法，以click事件为例。 Mouse Events - SMIL     "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> http://www.w3.org/2000/svg"      xmln
网页上SVG图添加局部点击事件
king_miQ的博客
07-01 6794
1.SVG图显示首先使用iframe 标签包裹并定义Id iframeId <iframe scrolling="no" id="iframeId" src="~/AI_SVG/主图.svg" style="margin-top:-7%; position:fixed;width:100%;height:140%;" /> 2.SVG图在VS中打开找到指定区域代码添加Id 3.js部分，这里我在SVG图源码中给一个图片添加了img1的Id $("#iframeId").on(
HTML5 SVG打造卡通动物动画特效
HTML5是最新版的HTML标准，为网页提供了一个更清晰的结构和更丰富的功能。它支持所有类型的内容，包括文本、图像、音频和视频。HTML5也引入了新的元素和API，比如`<canvas>`和WebGL，为开发者提供了更多控制页面和...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值