如果svg代码在html中，我们就更容易写javascript来控制图形的变换，下面为大家介绍一些svg的预定义的形状元素，感兴趣的朋友可以参考下哈，希望对大家有所帮助
SVG 文件可通过以下标签嵌入 HTML 文档：、或者。</p> <p><font color="#ee1111">代码如下:</font></p> <p><embed src="rect.svg" width="300"height="100"</p> <p>type="image/svg+xml"</p> <p>pluginspage="http://www.adobe.com/svg/viewer/install/"/></p> <p>pluginspage 属性指向下载插件的 URL。</p> <p><font color="#ee1111">代码如下:</font></p> <p><object data="rect.svg"width="300" height="100"</p> <p>type="image/svg+xml"</p> <p>codebase="http://www.adobe.com/svg/viewer/install/"/></p> <p><iframe src="rect.svg" width="300"height="100"></p> <p>
在这三个中是比较早期的标签，现在用的比较的少了。用的较多的还是<embed>标签。</p> <p>同时我们也可以将svg直接写入HTML文件中：</p> <p>这样的话需要先引入SVG的dtd文件：</p> <p><font color="#ee1111">代码如下:</font></p> <p><?xml version="1.0" standalone="no"?></p> <p><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"</p> <p>"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"></p> <p>再在<svg>标签中填入需要的代码：</p> <p><font color="#ee1111">代码如下:</font></p> <p><svg width="100%" height="100%" version="1.1"</p> <p>xmlns="http://www.w3.org/2000/svg" onclick="ccc();"></p> <p><ellipse cx="240" cy="100" rx="220" ry="30"</p> <p>style="fill:yellow"/></p> <p><ellipse cx="220" cy="100" rx="190" ry="20" id="w1"</p> <p>style="fill:white"/></p> <p></svg></p> <p>如果svg代码在html中，我们就更容易写javascript来控制图形的变换：</p> <p><font color="#ee1111">代码如下:</font></p> <p><script type="text/javascript"></p> <p>function ccc(){</p> <p>var a = document.getElementById("w1");</p> <p>a.style.fill="red";</p> <p>a.setAttribute("cx", "150"); //设置值</p> <p>a.setAttribute("ry", "50"); //设置值</p> <p>}</p> <p></script></p> <p>下面介绍一些svg的预定义的形状元素：</p> <p>矩形 <rect></p> <p>圆形 <circle></p> <p>椭圆 <ellipse></p> <p>线 <line></p> <p>折线 <polyline></p> <p>多边形 <polygon></p> <p>路径 <path></p> </div> <div class="c_nrgg"></div> <div class="c_nrgdd"> 更多信息请查看 <a href="//www.reelogic.com/c2022.aspx">网页制作</a> </div> <div class="c_nrgdd"></div> <div class="c_nrgdd"> <a href="//www.reelogic.com/memberNewsAdd.aspx">【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】</a> <a href="//www.reelogic.com/n4836c56.aspx">【点此处查询各地各类考试咨询QQ号码及交流群】</a> </div> <div class="c_nrgdds"> 上一篇： <a href="//www.reelogic.com/n1479035c2022.aspx">html5 input属性使用示例</a> </div> <div class="c_nrgdds"> 下一篇： <a href="//www.reelogic.com/n1479043c2022.aspx">html5贪吃蛇游戏使用63行代码完美实现</a> </div> <div class="c_nrgdds"> 手机网站地址： <a href="//www.reelogic.com/wap/n1479039c2022.aspx">HTML中使用SVG与SVG预定义形状元素介绍</a> </div> <div class="c_nrgdd"> 由于各方面情况的不断调整与变化， 提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！ </div> <div class="c_nrtja"> <div class="c_nrtja1"> <span class="c_nrtja2">相关阅读</span> <a href="//www.reelogic.com/c2022.aspx">网页制作</a> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970477c2022.aspx">使用CSS制作立体导航栏</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970472c2022.aspx">用纯CSS3实现网页中常见的小箭头</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970468c2022.aspx">有关HTML5中背景音乐的自动播放功能</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970466c2022.aspx">HTML5、Select下拉框右边加图标的实现代码(增进用户体验)</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970462c2022.aspx">html5实现图片转圈的动画效果——让页面动起来</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970458c2022.aspx">html5清空画布方法(三种)</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970455c2022.aspx">HTML实现移动端固定悬浮半透明搜索框</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970452c2022.aspx">HTML5 文件域+FileReader 分段读取文件并上传到服务器</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970450c2022.aspx">Dreamweaver怎么设计彩色边框的表格?</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970449c2022.aspx">Dreamweaver怎么给个人简历添加照片并排版?</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970445c2022.aspx">基于HTML5的WebGL实现json和echarts图表展现在同一个界面</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970444c2022.aspx">解决HTML5手机端页面缩放的问题</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949732c2022.aspx">利用纯CSS实现居中的七大方法示例</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949729c2022.aspx">CSS3中伪元素::before和::after的用法示例</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949727c2022.aspx">详解使用 CSS 的 font-size-adjust 属性改善网页排版</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949725c2022.aspx">HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949723c2022.aspx">css3 pointer-events 介绍详解</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949721c2022.aspx">CSS :focus-within的具体使用</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949718c2022.aspx">你所不知道的 CSS 动画技巧与细节</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949717c2022.aspx">详解CSS3选择器:nth-child和:nth-of-type之间的差异</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> </div> </div> </div> <div class="c_lbright_nr"> <div class="c_nr_lbxx1"> <div class="c_lbright_nr1bt1s"> <a href="//www.reelogic.com/wap/"> 移动网站</a> </div> </div> <style> /**enroll**/ .enroll_out { width:260px; float:left; } .enroll_wrap { background: rgba(255, 232, 232, 1); padding: 20px 20px 10px 10px; box-sizing: border-box; border-radius:4px; margin-bottom:10px; } .enroll_title { color: #ff4e00; font-size: 17px; margin-bottom: 18px; margin-left: 10px; } .enroll_wrap li { margin-bottom: 12px; } .enroll_li { display: flex; align-items: center; } .enroll_list { padding:0px; margin:0px; } .enroll_list span { display: inline-block; width: 88px; text-align: right; margin-right: 10px; color: #666; font-size:14px; } .enroll_list .info { background: #fff; border: 1px solid rgba(217, 217, 217, 1); width:78%; } .enroll_list input:focus { outline: none; } .enroll_list .info.selType { background: #fff url(https://www.ynhfpx.com/static/common/img/select_bg.png) no-repeat 95% center; appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-left: 5px; width:80%; } .enroll_wrap input, .enroll_wrap select, .enroll_wrap option { border-radius: 2px; height: 36px; line-height: 36px; } .enroll_list .code_dh { width: 60px; margin-right: 10px; border: 1px solid rgba(217, 217, 217, 1); } .enroll_list .pl5 { padding-left: 5px; } .getCode { background: #00CE7F; text-align: center; color: #fff; width: 90px; border:none; } .code_get_dh { } #enrollBtn { background: linear-gradient(to right, #ec665c, #f07549, #f6892e); text-align: center; box-shadow: 0 4px 10px #f8dcdc; width: 100%; line-height: 50px; height: 50px; color: #fff; font-size: 16px; margin-left: 5px; margin-top: 10px; border:none; } .enroll_list li { list-style-type:none; } </style> <div class="enroll_out"> <div class="enroll_wrap"> <form action="" id="myform"> <p class="enroll_title">2025国考·省考课程试听报名</p> <ul class="enroll_list"> <li class="enroll_li"><span>报班类型</span><select name="class" id="class" class="info selType"><option value="">请选择报班类型</option><option value="网课班299">网课班299</option><option value="全年巅峰班16800">全年巅峰班16800</option><option value="全年通关班16800">全年通关班16800</option><option value="联报班12800">联报班12800</option><option value="省考笔试全程班7800">省考笔试全程班7800</option><option value="省考笔试+面试班9800">省考笔试+面试班9800</option><option value="省考笔试+事业单位笔试9800">省考笔试+事业单位笔试9800</option><option value="省考基础班4980">省考基础班4980</option></select></li> <li class="enroll_li"><span>姓名</span><input class="info pl5" type="text" name="uname" id="uname" placeholder="姓名"></li> <li class="enroll_li"><span>手机号</span><input class="info pl5" type="text" name="tel" id="tel" placeholder="手机号"></li> <li class="enroll_li"><span>验证码</span><input class="code_dh pl5" type="text" name="code_tel" id="code_dh" placeholder="验证码"><input class="getCode code_get_dh" type="button" value="获取验证码"></li> <li><input type="hidden" name="formid" value="1"><input type="hidden" name="fuid" value="1"><input type="button" class="enrollBtn" id="enrollBtn" value="提交预约"></li> </ul> </form> </div> </div> <div class="c_nr_lbxx1"> <div class="c_lbright_nr1bt1"> 最新信息 </div> <div class="c_nr_lbxx_tui"> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304168c1185.aspx">2025年大理州南涧县事业单位考核招聘综合成绩及进入体检人员通知</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304167c1185.aspx">2025年大理州巍山县文化和旅游局事业单位考核招聘面试成绩及体检公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304166c989.aspx">2024年昆明市医疗保障基金运行监测评估中心选调拟选调人员公示</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304165c1180.aspx">2025年国昆广源（北京）科技有限公司云南分公司招聘启事</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304164c1180.aspx">2025年云南裕能新能源电池材料有限公司二期项目招聘简章</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304163c994.aspx">2025年红河州和信公证处招聘公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304162c1185.aspx">2025年大理州文化和旅游局事业单位考核招聘笔试成绩及面试名单公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304161c1185.aspx">2025年大理州农业农村局事业单位考核招聘笔试成绩及进入面试人员公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304160c39.aspx">2025年同等学力人员申请硕士学位外国语水平和学科综合水平全国统一考试通知</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2304159c39.aspx">2025年同等学力人员申请硕士学位外国语水平和学科综合水平考试报名通知</a> </div> </div> </div> <div class="c_nr_lbxx1"></div> <div class="c_nr_lbcd"> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/gwy.svg" width="20" height="20">公考类 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1072.aspx">云南公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1220.aspx">贵州公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1219.aspx">四川公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1311.aspx">广西公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1252.aspx">各省公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1015.aspx">国家公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1253.aspx">选调遴选</a></span> </div> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/zp.svg" width="20" height="20">招聘类 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c934.aspx">188app金宝搏 </a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1431.aspx"></a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1110.aspx">特岗教师</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1291.aspx">三支一扶</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1291.aspx">志 愿 者</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1448.aspx">银行招聘</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1124.aspx">国企招聘</a></span> </div> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/ks.svg" width="20" height="20">各类考试 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c690.aspx">学历升学</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c385.aspx"></a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c921.aspx">职业资格</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c373.aspx">外语考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c375.aspx">医学考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c225.aspx">工程考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c823.aspx">教师资格</a></span> </div> </div> </div> </div> <!-- <img src="http://admyn.ynpxrz.com/adv/hf.png" alt="" srcset=""> --> <div class="c_gywm"> <a href="//www.reelogic.com/n38c56.aspx" target="_blank">关于我们</a>| <a href="//www.reelogic.com/n76555c56.aspx" target="_blank">联系我们</a>| <a href="//www.reelogic.com/n340264c1277.aspx" target="_blank">人才招聘</a>| <a href="//www.reelogic.com/n3452c56.aspx" target="_blank">网站声明</a>| <a href="//www.reelogic.com/n2514c56.aspx" target="_blank">网站帮助</a>| <a href="//www.reelogic.com/memberNewsAdd.aspx" target="_blank">非正式的简要咨询</a>| <a href="//www.reelogic.com/n21580c56.aspx" target="_blank">简要咨询须知</a>| <a href="//www.reelogic.com/n4836c56.aspx" target="_blank">新媒体/短视频平台</a>| <a href="//www.reelogic.com/wap" target="_blank">手机站点</a>| <a href="https://www.ynbxjy.com/tsjy.html" target="_blank">投诉建议</a> </div> <div class="c_gywm"> <span>工业和信息化部备案号：<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">滇ICP备2023014141号-1</a></span> <span><a href="//www.reelogic.com/n48442c56.aspx" target="_blank">云南省教育厅备案号：云教ICP备0901021</a></span> <span><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=53010202001879" target="_blank" rel="nofollow">滇公网安备53010202001879号</a></span> <span>人力资源服务许可证：（云）人服证字（2023）第0102001523号</span> </div> <div class="c_gywm1"> <div class="c_ga_1" style="width:200px;"> <a href="http://www.yn.cyberpolice.cn:81/RecValidate/RecView.aspx?RecordID=53010203402261" target="_blank" class="wjba" rel="nofollow"><img src="//www.reelogic.com/pic/gonganbeian.jpg" border="0" alt="云南网警备案专用图标" width="45" height="50"></a> </div> <div class="c_ga_2" style="width:700px;"> <span>联系电话：0871-65099533/13759567129</span> <span>获取招聘考试信息及咨询关注公众号：</span> <br> <span>咨询QQ：1093837350（9:00—18:00）</span> <span>版权所有:<span style="font-weight: bold; font-family: arial;" id="iwms_cp"><a href="//www.reelogic.com"></a></span></span> </div> <div class="c_ga_3" style="width:200px;"> <a href="http://www.yn.cyberpolice.cn/" target="_blank" class="wjbj" rel="nofollow"><img src="//www.reelogic.com/pic/gonganbj.jpg" border="0" alt="云南网警报警专用图标" width="48" height="52"></a> </div> </div> <!-- <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://www.reelogic.com/hm.js?e5dabc539f2ab7c2f06ff8fce27ffff8"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> --> <div style="text-align:center;margin-bottom:5px;"><form action="http://www.baidu.com/baidu" target="_blank"><div bgcolor="#FFFFFF" style="text-align:center;"><input name="tn" type="hidden" value="baidu"><a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" width="80px" height="29px" alt="Baidu" align="bottom" border="0"></a><input type="text" name="word" size="30" placeholder="" value=""><input type="submit" value="baidu"></div></form></div><div id="so360" style="text-align:center;margin-bottom:5px;"><form action="https://www.so.com/" target="_blank" id="so360form"><img src="http://p1.qhimg.com/d/_onebox/search.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="so360_keyword" placeholder="" value=""> <input type="submit" id="so360_submit" value="360"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div id="sogou" style="text-align:center;margin-bottom:5px;"><form action="https://www.sogou.com/" target="_blank" id="so360form"><img src="https://www.sogou.com/web/index/images/logo_440x140.v.4.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="sogou.com_keyword" placeholder="" value=""> <input type="submit" id="sogou_submit" value="sougou"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div align="center"><a target="_blank" href="/sitemap.xml">map</a></div></body> </html>
事业单位
当前位置：