欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML中行使SVG与SVG预界说外形元素先容

发布时间:2016-11-26  编辑:杨雨个人博客网站   点击:   

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>
本文地址:http://itbyc.com/web/html5/13387.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1