HTML中使用SVG与SVG预定义形状元素介绍

誓言是谎言岁月

誓言是谎言岁月

2016-02-19 10:36

下面这个HTML中使用SVG与SVG预定义形状元素介绍教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!
SVG 文件可通过以下标签嵌入 HTML 文档:embed、object或者iframe。

代码如下:

embed src="rect.svg" width="300"height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/

pluginspage 属性指向下载插件的 URL。

代码如下:

object data="rect.svg"width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/"/
iframe src="rect.svg" width="300"height="100"
/iframe

在这三个中iframe是比较早期的标签,现在用的比较的少了。用的较多的还是embed标签。
同时我们也可以将svg直接写入HTML文件中:
这样的话需要先引入SVG的dtd文件:

代码如下:

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"

再在svg标签中填入需要的代码:

代码如下:

svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg" onclick="ccc();"
ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/
ellipse cx="220" cy="100" rx="190" ry="20" id="w1"
style="fill:white"/
/svg

如果svg代码在html中,我们就更容易写javascript来控制图形的变换:

代码如下:

script type="text/javascript"
function ccc(){
var a = document.getElementById("w1");
a.style.fill="red";
a.setAttribute("cx", "150"); //设置值
a.setAttribute("ry", "50"); //设置值
}
/script

下面介绍一些svg的预定义的形状元素:
矩形 rect
圆形 circle
椭圆 ellipse
线 line
折线 polyline
多边形 polygon
路径 path
展开更多 50%)
分享

猜你喜欢

HTML中使用SVG与SVG预定义形状元素介绍

Web开发
HTML中使用SVG与SVG预定义形状元素介绍

HTML5之SVG 2D入门7—SVG元素的重用与引用

Web开发
HTML5之SVG 2D入门7—SVG元素的重用与引用

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用

Web开发
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用

HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

Web开发
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

html5 svg 中元素点击事件添加方法

Web开发
html5 svg 中元素点击事件添加方法

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

Web开发
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

HTML5中如何显示视频呢 HTML5视频播放demo

HTML5中如何显示视频呢 HTML5视频播放demo

关于国际化、OGNL表达式语言

关于国际化、OGNL表达式语言
下拉加载更多内容 ↓