这期内容当中小编将会给大家带来有关HTML中使用SVG与SVG预定义形状元素的介绍是怎样的，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
SVG 文件可通过以下标签嵌入 HTML 文档：、或者。</p><br/><br/><p>代码如下:</p><p><br/><embed src="rect.svg" width="300"height="100"<br/>type="image/svg+xml"<br/>pluginspage="http://www.adobe.com/svg/viewer/install/"/></p><br/><p><br/>pluginspage 属性指向下载插件的 URL。</p><br/><br/><p>代码如下:</p><p><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文件：</p><br/><br/><p>代码如下:</p><p><br/><?xml version="1.0" standalone="no"?><br/><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"<br/>"/tupian/20230522/svg11.dtd"></p><br/><p><br/>再在<svg>标签中填入需要的代码：</p><br/><br/><p>代码如下:</p><p><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/>/><br/><ellipse cx="220" cy="100" rx="190" ry="20" id="w1"<br/>/><br/></svg></p><br/><p><br/>如果svg代码在html中，我们就更容易写javascript来控制图形的变换：</p><br/><br/><p>代码如下:</p><p><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></p><br/><p><br/>下面介绍一些svg的预定义的形状元素：<br/>矩形 <rect><br/>圆形 <circle><br/>椭圆 <ellipse><br/>线 <line><br/>折线 <polyline><br/>多边形 <polygon><br/>路径 <path></p><br/><p>上述就是小编为大家分享的HTML中使用SVG与SVG预定义形状元素的介绍是怎样的了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。</p> <br> 网站题目：HTML中使用SVG与SVG预定义形状元素的介绍是怎样的-创新互联 <br> 分享地址：<a href="http://csruizhi.cn/article/cdehoo.html">http://csruizhi.cn/article/cdehoo.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dojeocg.html">防采集wordpress 防采集的网站如何采集里面的文章</a> </li><li> <a href="/article/dojeooo.html">vb.net类库下载 vbnet ide</a> </li><li> <a href="/article/dojshhc.html">帝国cms百度不收录吗 帝国cms收费吗</a> </li><li> <a href="/article/dojeoco.html">帝国cms多商户 帝国cms做商城</a> </li><li> <a href="/article/dojeoch.html">帝国cms无法修改栏目 帝国cms刷新失败</a> </li> </ul> </div> </div> <div class="footer2"> Copyright © 2007-2024 成都优众联杰科技有限公司 All Rights Reserved 蜀ICP备2024116266号 <br />友情链接： <a href="http://www.cqcxhl.com/service/" target="_blank">品牌网站建设 </a><a href="http://m.cdcxhl.cn/mobile/" target="_blank">手机网站制作 </a><a href="http://m.cdcxhl.com/" target="_blank">成都网站制作 </a><a href="http://www.kswcd.com/mobile/" target="_blank">手机网站制作 </a><a href="http://chengdu.cdcxhl.com/" target="_blank">营销型网站建设 </a><a href="http://www.kswcd.cn/" target="_blank">成都网站设计制作公司 </a><a href="http://www.cxjianzhan.com/" target="_blank">网站制作 </a><a href="http://m.cdcxhl.cn/shop/" target="_blank">成都商城网站建设 </a><a href="https://www.cdcxhl.com/zhizuo/chengdu.html" target="_blank">四川成都网站制作 </a><a href="http://www.cxhlcq.com/" target="_blank">重庆网站建设 </a><a href="http://www.kswcd.com/" target="_blank">成都企业网站设计 </a><a href="https://www.cdxwcx.com/" target="_blank">做网站设计 </a><a href="http://m.cdcxhl.cn/seo/" target="_blank">成都网站建设推广 </a><a href="http://m.cdcxhl.cn/dingzhi/" target="_blank">定制网站制作 </a><a href="http://www.cdkjz.cn/fangan/" target="_blank">网站建设方案 </a><a href="http://chengdu.cdcxhl.cn/" target="_blank">成都网站设计 </a><a href="http://seo.cdkjz.cn/mobile/" target="_blank">自适应网站设计 </a><a href="https://www.cdcxhl.com/" target="_blank">网站建设公司 </a><a href="http://www.kswcd.cn/" target="_blank">专业网站建设 </a><a href="http://m.cdcxhl.com/dingzhi.html" target="_blank">定制网站建设多少钱 </a><a href="http://www.cxjianzhan.com/" target="_blank">成都网站制作 </a><a href="http://www.cxhljz.cn/" target="_blank">成都网站建设 </a></div> </body> </html> <script src="/Public/Home/js/wow.min.js"></script> <script> if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) { new WOW().init(); }; </script> <div class="sidebar"> <ul> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=244261566&site=www.csruizhi.cn&menu=yes" target="_blank"><img src="/Public/Home/images/right_qq.png" /></a></li> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=1683211881&site=www.csruizhi.cn&menu=yes" target="_blank"><img src="/Public/Home/images/qq.png" /></a></li> <li class="tel"><a href="tel:028-86922220"><img src="/Public/Home/images/right_tel.png" /></a></li> <div class="wx"> <span class="weixin"><img src="/Public/Home/images/weixin.jpg"><br> 微信扫一扫在线咨询</span> </div> <li><a class="fx" href="#hero"><img src="/Public/Home/images/right_up.png" /></a></li> </ul> </div> <script type="text/javascript"> $(function () { $('.sidebar .fx').click(function () { $('html,body').animate({ scrollTop: '0px' }, 800); }); }); </script> <script type="text/javascript"> $(document).ready(function () { $("#fancybox-manual-b").click(function () { $.fancybox.open({ href: 'map.html', type: 'iframe', padding: 5 }); }) }); </script> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>
