Html5 的 SVG功能介绍

最新推荐文章于 2024-08-28 07:00:00 发布
最新推荐文章于 2024-08-28 07:00:00 发布
阅读量3.8k 收藏 4
点赞数 1
文章标签： html5 safari html xml image javascript
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
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5之SVG的使用
Shmily的博客
05-20 576
HTML5之SVG的使用 一、什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics)； SVG 用于定义用于网络的基于矢量的图形； SVG 使用 XML 格式定义图形； SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失； SVG 是万维网联盟的标准； 二、SVG的优点 SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SV
【HTML5】——SVG基础
袅袅青烟散的博客
10-11 614
目录1.什么是SVG 2.绘制图形——矩形元素 3.绘制图形——圆形元素 4.绘制图形——椭圆元素 5.绘制图形——线条元素 6.绘制图形——折线元素 7.绘制图形——多边形元素 8.特效元素——渐变元素 9.特效元素——滤镜元素 10.绘制图片 11.画布方法 12.two.js1.什么是SVGSVG（Scalable Vector Graphics）是一种使用XML技术描述
html5 svg 中元素点击事件添加方法
09-28
最近在用svg的点击事件做东西，之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件，接下来详细介绍添加方法，感兴趣的朋友可以了解下
HTML5中的SVG的介绍
五天零一夜的寂寞
09-24 816
什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通
HTML5 SVG API及实例 SVG的特点
weixin_39557219的博客
08-06 823
什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通
html用svg事件,javascript-将SVG添加到HTML并处理事件
weixin_27310417的博客
06-09 690
我有这个SVG文件.显示不同的svg元素(圆形,Eclipse,多边形,折线等)每个元素都有自己的ID.单击该特定ID时,可以添加功能(onClick或MouseClicK).有什么方法可以添加一个通用函数(在JavaScript或Jquery中),该函数可以响应click事件并告诉我们click是从哪个对象(ID)发出的？所以我需要：> HTML代码以添加/引用SVG文件.不知道我使用SV...
HTML5 SVG彩色爱心圆圈背景动画特效
06-11
HTML5是一种先进的网页标记语言，它为网页开发者提供了更强大的功能和更丰富的用户体验。SVG（Scalable Vector Graphics）是HTML5中一个重要的图形元素，它支持矢量图，这意味着图像无论放大多少倍都能保持清晰，这...
HTML5 SVG弹性Tooltip提示框特效
06-24
本项目"HTML5 SVG弹性Tooltip提示框特效"利用SVG的强大功能，创建了一种独特且吸引人的用户界面元素——Tooltip。Tooltip通常用来在鼠标悬停在特定元素上时显示额外信息，它为用户提供了一种简洁的交互方式。而这个...
html5 svg点击购物车图标动态效果特效代码
03-20
HTML5是超文本标记语言的第五个版本，它引入了许多新特性，如离线存储、拖放功能、媒体元素（audio、video）、 canvas画布以及SVG（可缩放矢量图形）等。SVG是一种基于XML的图像格式，用于创建清晰的、高质量的、可...
html5+svg花朵动画特效特效代码
03-20
这篇文章将详细介绍如何利用HTML5和SVG实现花朵动画特效，以及如何自定义设置各种表情动画。 首先，HTML5是第五代超文本标记语言，它的引入极大地扩展了网页内容的表现力，特别是通过Canvas、SVG和Web Audio等API，...
HTML5 SVG可互动的3D标签云特效代码
03-20
HTML5和SVG（ Scalable Vector Graphics）是现代网页开发中的核心技术，它们共同为创建丰富的、交互式的用户体验提供了强大支持。本篇文章将深入探讨HTML5 SVG可互动的3D标签云特效代码，以及如何利用这些技术实现...
html svg 点击事件失效_想做SVG但不会改代码？来用动画功能呀！
weixin_31474035的博客
12-27 479
嘿，胖友们大家好呀，我是小三儿最近这段时间，SVG推文大热，135编辑器也是新上架了数十款热门SVG样式，三儿的教程也是一波接着一波的出。为了让胖友们更快捷的对SVG样式进行设置，135编辑器也进行了一波大改动，在专业版菜单栏中增加了『动画』选项，我们目前所有的教程都是在『动画』菜单栏中进行设置的。那么问题来了，不少胖友对动画功能还是有点没搞懂，『动画』按钮到底在哪里？『动画』设置到底有...
svg 点击 事件_原生JS + SVG 小游戏
weixin_39672979的博客
12-10 1176
游戏在线地址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 129
<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 440
svg矢量文件体积小，不变形，比传统的png先进，比现在流行的icon-font灵活。然而在使用过程中还是遇到了很多坑。今天花了一天时间把经验整理出来，以供后来者借鉴。如果您从本文收益，请留言mark一下。 这里我们要实现的功能是，一个svg文件包含多个图形，这样的好处是，网络请求次数少，加载快速。否则一个网页有10个图标就要请求10次。 一、制作svg 1.用记事本新建一个mysvg...
4.SVG 矩形（rect）
liuhao9999的博客
03-28 3008
SVG 形状（Shapes） 就像画板应用一样，SVG为开发者提供了一些预定义的形状元素，以便于快速应用： 方形 <rect> 圆形 <circle> 椭圆 <ellipse> 线条 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 后续章节我们将逐个介绍这些图形元素，先从方形及其一些变体开始。 由于SVG代码可读性较高，我们就使用实例代码结合代码解释的方式来学习。
【日常记录-JS】HTML5中使用SVG元素
最新发布
zhaoyaxuan001的博客
08-28 396
在HTML5中使用SVG元素主要涉及到将SVG代码直接嵌入HTML文档，或者通过HTML元素（如<img>、<object>、<iframe>）来引用外部SVG文件。然而，直接嵌入SVG代码通常提供了更大的灵活性和控制力，因为它允许直接在HTML中定义SVG图形的形状、大小、颜色等属性，并且可以使用CSS和JavaScript来进一步样式化和交互。在HTML5中使用SVG元素是一种强大且灵活的方式来创建矢量图形，它们可以很容易地集成到网页中，并支持通过CSS和JavaScript进行样式化和交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值