首页
IT资讯
爱搞机
墨香
笔电
手机
剁手
系统
网页制作
1000元配置
2000元配置
3000元配置
4000元配置
5000元配置
6000元配置
7000元配置
8000元配置
9000元配置
万元配置
i3配置
i5配置
i7配置
APU配置
R5配置
R7配置
游戏攻略
软件教程
Win10教程
Win7教程
Mac教程
Linux教程
U盘教程
Server教程
首页
>
网页制作
>
html5
HTML中使用SVG与SVG预定义形状元素介绍
admin
html5
2022-02-06 03:11:26
SVG
预定义
形状元素"
SVG 文件可通过以下标签嵌入 HTML 文档：
、
或者
。 <br /><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下: <br /><embed src="rect.svg" width="300"height="100" <br />type="image/svg+xml" <br />pluginspage="http://www.adobe.com/svg/viewer/install/"/> <br /><br />pluginspage 属性指向下载插件的 URL。 <br /><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下: <br /><object data="rect.svg"width="300" height="100" <br />type="image/svg+xml" <br />codebase="http://www.adobe.com/svg/viewer/install/"/> <br /><iframe src="rect.svg" width="300"height="100"> <br />
在这三个中
是比较早期的标签，现在用的比较的少了。用的较多的还是<embed>标签。 <br />同时我们也可以将svg直接写入HTML文件中： <br />这样的话需要先引入SVG的dtd文件： <br /><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下: <br /><?xml version="1.0" standalone="no"?> <br /><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" <br />"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <br /><br />再在<svg>标签中填入需要的代码： <br /><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下: <br /><svg width="100%" height="100%" version="1.1" <br />xmlns="http://www.w3.org/2000/svg" onclick="ccc();"> <br /><ellipse cx="240" cy="100" rx="220" ry="30" <br />style="fill:yellow"/> <br /><ellipse cx="220" cy="100" rx="190" ry="20" id="w1" <br />style="fill:white"/> <br /></svg> <br /><br />如果svg代码在html中，我们就更容易写javascript来控制图形的变换： <br /><br><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span>代码如下: <br /><script type="text/javascript"> <br />function ccc(){ <br />var a = document.getElementById("w1"); <br />a.style.fill="red"; <br />a.setAttribute("cx", "150"); //设置值 <br />a.setAttribute("ry", "50"); //设置值 <br />} <br /></script> <br /><br />下面介绍一些svg的预定义的形状元素： <br />矩形 <rect> <br />圆形 <circle> <br />椭圆 <ellipse> <br />线 <line> <br />折线 <polyline> <br />多边形 <polygon> <br />路径 <path> <br /> <span id="art_bot" class="jbTestPos"></span> </div> <div class="pagebar"> </div> <div class="pcd_ad"><script src=/d/js/acmsd/thea14.js></script></div> <div class="mbd_ad"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5850285417076520" data-ad-slot="9825815134" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="rights"> <h5>版权声明</h5> <p>本文仅代表作者观点，不代表本站立场。<br> 本文系作者授权发表，未经许可，不得转载。<br>本文地址：/web/html5/75833.html</p> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["fbook","twi","linkedin","qzone","tsina","douban","weixin","evernotecn"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?'];</script> </div> <div class="r-pn-post"> <div class="shang"><a title="Html5实现iPhone开机界面示例代码" href="/web/html5/75832.html" rel="bookmark" class="prev_p"><span>上一篇 :</span> Html5实现iPhone开机界面示例代码 </a></div> <div class="xia"><a href="/web/html5/75834.html" rel="bookmark" class="next_p"><span>下一篇 :</span> html5 worker 实例(一) 为什么测试不到效果</a></div> <div class="clear"></div> </div> </div> <div class="related"> <h4>相关文章</h4> <ul> <li> <a href="/jtjc/win10/128878.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015917170255632.png?201581717434" alt="如何让IIS6支持svg图像显示"></div> <p>如何让IIS6支持svg图像显示</p> </a> </li><li> <a href="/jtjc/win10/128876.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015917172129883.gif?2015817172146" alt="IIS7环境下实现svg/woff/woff2字体正常显示"></div> <p>IIS7环境下实现svg/woff/woff2字体正常显示</p> </a> </li><li> <a href="/web/XML/77521.html"> <div class="img"><img src="https://img.jbzj.com/file_images/xml/2008101720215754677801.gif" alt="XML模式:FIXML和SVG"></div> <p>XML模式:FIXML和SVG</p> </a> </li><li> <a href="/web/XML/77459.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201508/2015813183133933.jpg?2015713183143" alt="编写SVG布置画布和坐标系统以及视窗的方法"></div> <p>编写SVG布置画布和坐标系统以及视窗的方法</p> </a> </li><li> <a href="/web/html5/77043.html"> <div class="img"><img src="https://www.iwyv.com/d/files/20220206/ubt01walibt.jpg" alt="Html5之svg可缩放矢量图形_动力节点Java学院整理"></div> <p>Html5之svg可缩放矢量图形_动力节点Java学院整理</p> </a> </li><li> <a href="/web/CSS/76174.html"> <div class="img"><img src="https://www.iwyv.com/d/files/20220206/4vncuqbfxng.gif" alt="基于 CSS 动画的 SVG 按钮实例代码"></div> <p>基于 CSS 动画的 SVG 按钮实例代码</p> </a> </li><li> <a href="/web/html5/75896.html"> <div class="img"><img src="https://www.iwyv.com/d/files/20220206/dsy1anbb4ol.png" alt="HTML5之SVG 2D入门4—笔画与填充"></div> <p>HTML5之SVG 2D入门4—笔画与填充</p> </a> </li><li> <a href="/web/html5/75914.html"> <div class="img"><img src="https://www.jb51.net/html5/sun.svg" alt="HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述"></div> <p>HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述</p> </a> </li> </ul> </div> <div class="post_comments"> <div id="comment"> <link href="/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script> <form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!"></textarea> <script src="/d/js/js/plface.js"></script> <table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'> <tr> <td width="80%" height="40" bgcolor="#FFFFFF">验证码：<input name="key" type="text" class="inputText" size="16" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </td> <td width="20%" height="40" bgcolor="#FFFFFF"> <input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 16px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;"> <input name="id" type="hidden" id="id" value="75833" /> <input name="classid" type="hidden" id="classid" value="47" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="/web/html5/75833.html"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></form> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td bgcolor="#FFFFFF" id="infocommentarea"></td> </tr> </table> <script src="/e/extend/infocomment/commentajax.php?classid=47&id=75833"></script> </div> </div> </div> <div class="pcd_ad"><script src=/d/js/acmsd/thea18.js></script></div> <div class="mbd_ad"> <!-- 手机广告位-评论底部广告位新 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5850285417076520" data-ad-slot="9383780240" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script type="text/javascript" src="//gg.iwyv.com/production/mh_g/i/static/wi_djn.js"></script> </div> </div> <!--@ mainl--> <div class="mainr"> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea14.js></script> </div> <div class="widget widget_hotpost"> <h4>热门文章</h4> <ul> <li><i class="red">1</i><a href="/web/html5/75947.html" target="_blank">基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码</a></li> <li><i class="red">2</i><a href="/web/html5/73062.html" target="_blank">Html5饼图绘制实现统计图的方法</a></li> <li><i class="red">3</i><a href="/web/html5/73961.html" target="_blank">钉钉企业内部H5微应用开发详解</a></li> <li><i>4</i><a href="/web/html5/72861.html" target="_blank">前端监听websocket消息并实时弹出(实例代码)</a></li> <li><i>5</i><a href="/web/html5/72866.html" target="_blank">html实现弹窗的实例</a></li> <li><i>6</i><a href="/web/html5/72874.html" target="_blank">HTML5轮播图全代码</a></li> <li><i>7</i><a href="/web/html5/72875.html" target="_blank">使用PDF.js渲染canvas实现预览pdf的效果示例</a></li> <li><i>8</i><a href="/web/html5/75147.html" target="_blank">HTML5实现自带进度条和滑块滑杆效果</a></li> <li><i>9</i><a href="/web/html5/75201.html" target="_blank">canvas实现按住鼠标移动绘制出轨迹的示例代码</a></li> <li><i>10</i><a href="/web/html5/73050.html" target="_blank">uniapp+Html5端实现PC端适配</a></li> </ul> </div> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea10.js></script> </div> <div class="widget widget_previous"> <h4>最近发表</h4> <ul> <li><a href="/ITzixun/178187.html">日本雷蛇官网实习生上错价了？游戏本只卖15950日元？</a></li> <li><a href="/youxi/175574.html">《原神》物归原主又归原主世界任务指南 游戏攻略</a></li> <li><a href="/youxi/175631.html">《原神》振晶的研究第三天试用角色2000分攻略 游戏攻略</a></li> <li><a href="/youxi/175559.html">《原神》2.6版全旋曜玉帛点位说明_蒙德 游戏攻略</a></li> <li><a href="/youxi/175547.html">《原神》2.6版深渊11-1守护镇石技巧 游戏攻略</a></li> <li><a href="/youxi/175604.html">《原神》神里绫华装备搭配推荐 游戏攻略</a></li> <li><a href="/youxi/175516.html">《原神》云堇突破材料获取方法 游戏攻略</a></li> <li><a href="/youxi/175494.html">《原神》世界任务他乡迷失客攻略 游戏攻略</a></li> <li><a href="/youxi/175497.html">《原神》神里绫华全面培养指南 神里绫华技能详解与出装建议 游戏攻略</a></li> <li><a href="/youxi/175460.html">《原神》神里绫人平民向大世界配队思路 游戏攻略</a></li> </ul> </div> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea11.js></script> </div> <div class="widget widget_tags"> <h4>标签列表</h4> <ul> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%BC%80%E6%94%BE%E4%B8%96%E7%95%8C">开放世界</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%B2%99%E7%9B%92">沙盒</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win10">win10</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=3D%E8%AE%BE%E8%AE%A1">3D设计</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=PS">PS</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E9%AC%BC%E8%B0%B7%E5%85%AB%E8%8D%92">鬼谷八荒</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win7">win7</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%89%8B%E6%B8%B8">手游</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%9B%A2%E9%98%9F%E7%AB%9E%E6%8A%80">团队竞技</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%8E%9F%E7%A5%9E">原神</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E4%BA%8C%E6%AC%A1%E5%85%83%E6%B8%B8%E6%88%8F">二次元游戏</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AD%96%E7%95%A5">策略</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%94%B5%E8%84%91%E5%B8%B8%E8%AF%86">电脑常识</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80">王者荣耀</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%85%A7%E7%89%87%E5%A4%84%E7%90%86">照片处理</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=MySQL">MySQL</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%90%83%E9%B8%A1">吃鸡</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AC%94%E8%AE%B0%E6%9C%AC">笔记本</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%BB%9D%E5%9C%B0%E6%B1%82%E7%94%9F%E5%A4%A7%E9%80%83%E6%9D%80">绝地求生大逃杀</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%B0%84%E5%87%BB%E7%AB%9E%E4%BA%89">射击竞争</a></li> </ul> </div> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea12.js></script> </div> </div> </div> </div> <script type="text/javascript"> // JavaScript Document function goTopEx(){ var obj=document.getElementById("goTopBtn"); function getScrollTop(){ return document.documentElement.scrollTop || document.body.scrollTop; } function setScrollTop(value){ if(document.documentElement.scrollTop){ document.documentElement.scrollTop=value; }else{ document.body.scrollTop=value; } } window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none"; var h=document.body.scrollHeight - getScrollTop() - obj.offsetTop - obj.offsetHeight; obj.style.bottom=0+"px"; if(h<350){ obj.style.bottom=340+"px"; obj.style.top="auto"; } } obj.onclick=function(){ var goTop=setInterval(scrollMove,10); function scrollMove(){ setScrollTop(getScrollTop()/1.1); if(getScrollTop()<1)clearInterval(goTop); } } } </script> <!--向上 --> <div id="jz52top" > <span> <DIV style="DISPLAY: none" id="goTopBtn" ><a title="返回顶部" class="jz52topa" ><b>返回顶部</b></a></DIV> </span> <SCRIPT type=text/javascript>goTopEx();</SCRIPT> <span> <ul id="navmenu"> <li><a title="QR Code" class="jzqr" ><b>QR Code</b></a> <ul> <div id="jzqrn"> <img src="/skin/ecms172/images/weixin.png" width="228" height="228" /> <p>打开手机扫描上面的二维码</p> </div> </ul> </li> </ul> </span> </div> <!--向上完 --> <!-- 底部广告--> <!-- 底部广告--> <!--底部信息 --> <div class="ft_wp"> <div id="ft" class="wp cl ftddd" > <div class="ft_info" > <div class="ft_z1"> <p>潘少俊衡</p> <h3 class="ft_z_zdxx_zx"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1cc50873f5e983e8073d99a425b87921"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <span class="pipe"> | </span> 桂ICP备2023010378号-4 </h3> <h2 class="ft_z_zdxx_zx"> <p style="font-size:12px;">Powered By <a href="https://www.iwyv.com/" title="潘少俊衡" target="_blank">EmpireCMS</a> </p> </h2> </div> <div class="ft_z2"> </div> <div class="ft_z2"> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XFMBHZNTEL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XFMBHZNTEL'); </script> <p><a target="_blank" href="https://www.iixiang.com/">爱享小站</a></p> <p><a target="_blank" href="https://www.sdzdyn.com/">中德益农</a></p> <p><a target="_blank" href="https://www.guujie.com">谷姐神农</a></p> <p><a target="_blank" href="https://huanyafeiliao.com/">环亚肥料</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="https://beian.miit.gov.cn/Integrated/index">桂ICP备2023010378号-4</a></p> <p><a href="https://beian.miit.gov.cn" title="桂公网备 45012202000125号" target="_blank">桂公网备 45012202000125号</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">联系我们</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">商业合作</a></p> <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">广告投放</a></p> <p><a target="_blank" href="/tgxz/">投稿须知</a></p> </div> <div class="ft_bx"style="left:335px;"> </div> <div class="ft_bx ft_t1"> </div> <div class="ft_bx ft_t2"> </div> <div class="ft_bx ft_t3"> </div> <div class="ft_bx ft_t4"> </div> <div class="ft_z3"> <dd> <span><img src="/skin/ecms172/images/weixin.png" width="75" height="72.2" /></span> <p> <!-- 引用官方图标 --> <!-- 引用官方图标百度统计 --> </p> <p>使用手机软件扫描微信二维码</p> <p>关注我们可获取更多热点资讯</p> <p>感谢潘少俊衡友情技术支持</p> </dd> </div> </div> </div> </div> <div class="clear"></div> <!--底部信息完 --> <script src="/skin/ecms172/js/common.min.js" type="text/javascript"></script> <script></script> </body> </html>
