如果svg代码在html中，我们就更容易写javascript来控制图形的变换，下面为大家介绍一些svg的预定义的形状元素，感兴趣的朋友可以参考下哈，希望对大家有所帮助 SVG 文件可通过以下标签嵌入 HTML 文档：、或者。 <br/><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode5"> <br/><embed src="rect.svg" width="300" height="100" <br>type="image/svg+xml" <br/>pluginspage="http://www.adobe.com/svg/viewer/install/"/> <br/></div><br/>pluginspage 属性指向下载插件的 URL。 <br/><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode6"> <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><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode7"> <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/></div><br/>再在<svg>标签中填入需要的代码： <br/><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode8"> <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/></div><br/>如果svg代码在html中，我们就更容易写javascript来控制图形的变换： <br/><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode9"> <br/><br/></div><br/>下面介绍一些svg的预定义的形状元素： <br/>矩形 <rect> <br/>圆形 <circle> <br/>椭圆 <ellipse> <br/>线 <line> <br/>折线 <polyline> <br/>多边形 <polygon> <br/>路径 <path> <br/></div><p>以上就是HTML中使用SVG与SVG预定义形状元素介绍的详细内容，更多请关注0133技术站其它相关文章！</p></article><div class="post-actions"><a href="javascript:;" etap="like" class="post-like action action-like" data-pid="0"><i class="fa fa-thumbs-o-up"></i>赞(<span>0</span>)</a><a href="javascript:;" class="action action-rewards" data-event="rewards"><i class="fa fa-jpy"></i> 打赏</a></div><div class="post-copyright">未经允许不得转载：<a href="/">0133技术站首页</a> » <a href="/cate66/">HTML5 答疑</a></div><!--<div class="article-tags">标签：<a href="/archives/tag/javascript" rel="tag">JavaScript</a><a href="/archives/tag/%e5%be%ae%e4%bf%a1" rel="tag">微信</a><a href="/archives/tag/%e5%be%ae%e4%bf%a1%e7%9a%84%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">微信的版本号</a><a href="/archives/tag/%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">版本号</a><a href="/archives/tag/%e8%af%ad%e4%b9%89%e5%8c%96" rel="tag">语义化</a></div>--><nav class="article-nav"><span class="article-nav-prev">上一篇<br><a href="/cate66/116358819548900.html" rel="prev">Html5踩坑记之mandMobile使用小记</a></span><span class="article-nav-next">下一篇<br><a href="/cate66/116459374700900.html" rel="next">Canvas 文本填充线性渐变的使用详解</a></span></nav><div class="relates relates-thumb"><div class="title"><h3>相关文章</h3></div><ul><li><a href="/cate66/112643462225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d0d9f73510c1521.jpg-160" alt="html如何注释代码" class="thumb"></a><a href="/cate66/112643462225.html">html如何注释代码</a></li><li><a href="/cate66/112645004900.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d1339ccaaa38391.jpg-160" alt="HTML和HTML5之间有什么区别？" class="thumb"></a><a href="/cate66/112645004900.html">HTML和HTML5之间有什么区别？</a></li><li><a href="/cate66/112645519225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d142fef04894674.jpg-160" alt="HTML是什么意思" class="thumb"></a><a href="/cate66/112645519225.html">HTML是什么意思</a></li><li><a href="/cate66/112646033600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d143fd9a9a53968.jpg-160" alt="HTML如何检索元素的位置(X,Y)？" class="thumb"></a><a href="/cate66/112646033600.html">HTML如何检索元素的位置(X,Y)？</a></li><li><a href="/cate66/112650665225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d157ae5a90df429.jpg-160" alt="什么是HTML5" class="thumb"></a><a href="/cate66/112650665225.html">什么是HTML5</a></li><li><a href="/cate66/112652725025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d15b57859fd4613.jpg-160" alt="HTML的readonly属性怎么用？" class="thumb"></a><a href="/cate66/112652725025.html">HTML的readonly属性怎么用？</a></li><li><a href="/cate66/112654270400.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d15d57d537d1991.jpg-160" alt="HTML和XML之间有什么区别？" class="thumb"></a><a href="/cate66/112654270400.html">HTML和XML之间有什么区别？</a></li><li><a href="/cate66/112657362500.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d1700ec5ca8e230.jpg-160" alt="HTML如何调用JavaScript？" class="thumb"></a><a href="/cate66/112657362500.html">HTML如何调用JavaScript？</a></li></ul></div><!-- <div class="title" id="comments"><h3>评论 <small>抢沙发</small></h3></div><div id="respond" class="no_webshot"><form action="return false;" method="post" id="commentform"><div class="comt"><div class="comt-title"><img data-src="https://secure.gravatar.com/avatar/?s=100&d=mm" class="avatar avatar-100" height="50" width="50"><p><a id="cancel-comment-reply-link" href="javascript:;">取消</a></p></div><div class="comt-box"><textarea placeholder="你的评论可以一针见血" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"></textarea><div class="comt-ctrl"><div class="comt-tips"><input type='hidden' name='comment_post_ID' value='6053' id='comment_post_ID'/><input type='hidden' name='comment_parent' id='comment_parent' value='0'/><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="40dd7081eb"/></p><label for="comment_mail_notify" class="checkbox inline hide" style="padding-top:0"><input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked"/>有人回复时邮件通知我</label><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="245"/></p></div><button type="button" name="submit" id="submit" tabindex="5">提交评论</button>--><!-- <span data-type="comment-insert-smilie" class="muted comt-smilie"><i class="icon-thumbs-up icon12"></i> 表情</span> --><!-- </div></div><div class="comt-comterinfo" id="comment-author-info"><ul><li class="form-inline"><label class="hide" for="author">昵称</label><input class="ipt" type="text" name="author" id="author" value="" tabindex="2" placeholder="昵称"><span class="text-muted">昵称 (必填)</span></li><li class="form-inline"><label class="hide" for="email">邮箱</label><input class="ipt" type="text" name="email" id="email" value="" tabindex="3" placeholder="邮箱"><span class="text-muted">邮箱 (必填)</span></li><li class="form-inline"><label class="hide" for="url">网址</label><input class="ipt" type="text" name="url" id="url" value="" tabindex="4" placeholder="网址"><span class="text-muted">网址</span></li></ul></div></div></form></div>--></div></div><div class="sidebar"><div class="widget widget_ui_tags"><h3>常见问题</h3><div class="items"><a href="/cate66/">HTML5 答疑</a><a href="/cate67/">CSS3 答疑</a><a href="/cate68/">JavaScript 答疑</a><a href="/cate69/">JSON 答疑</a><a href="/cate70/">jQuery 答疑</a><a href="/cate82/">Angular.js 答疑</a><a href="/cate83/">Node.js答疑</a><a href="/cate85/">React 答疑</a><a href="/cate86/">Vue.js 答疑</a><a href="/cate87/">前端答疑</a><a href="/cate99/">其他答疑</a></div></div><form method="get" class="search-form clearfix" id="search-formhybrid-search" target="_blank" action="/search/article/"><div class="search-input-wrap"><input type="text" class="search-text" placeholder="来搜我" name="word" id="search-texthybrid-search" value="" data-placeholder=""><b class="search-liaosheji"></b><button type="submit" class="search-button"><i class="icon-search"></i></button></div></form><div style="text-align:center;margin:0 auto;"><ul class='hot-search layui-clear'><li style="float:left;margin-right:20px;">热门搜索：</li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=SVG'>SVG</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=SVG图标'>SVG图标</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=svg转化png'>svg转化png</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=ai导出svg'>ai导出svg</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=自定义形状'>自定义形状</a></li></ul></div><br/><div class="widget widget_ui_posts"><h3>置顶推荐</h3><ul><li><a href="/cate99/113247636454400.html"><span class="thumbnail"><img data-src="https://ss.0133.cn/upload/article/000/000/001/61c030e32e4d9281.jpg" alt="qq火花是过了24小时断吗" class="thumb"></span><span class="text">qq火花是过了24小时断吗</span><span class="muted">2021-12-20</span></a></li></ul></div><div class="widget widget_recent_entries"><h3>猜你喜欢</h3><ul><li><a href="/cate66/116940516100.html" target="_blank">常用的特殊符号有哪些？</a><span class="post-date">2020-02-20</span></li><li><a href="/cate66/113324635600.html" target="_blank">html中文为什么会乱码？html中文乱码怎么解决？</a><span class="post-date">2019-08-23</span></li><li><a href="/cate66/113099665625.html" target="_blank">字体颜色怎么设置？</a><span class="post-date">2019-08-14</span></li><li><a href="/cate66/114810769600.html" target="_blank">html如何插入视频？</a><span class="post-date">2019-11-11</span></li><li><a href="/cate66/112753060900.html" target="_blank">HTML中文乱码怎么解决？</a><span class="post-date">2019-07-20</span></li><li><a href="/cate66/113158400000.html" target="_blank">txt是什么格式？</a><span class="post-date">2019-08-16</span></li><li><a href="/cate66/113318872100.html" target="_blank">什么是代码？</a><span class="post-date">2019-08-23</span></li><li><a href="/cate66/113476831225.html" target="_blank">空格键符号是什么？HTML中空格键符号有哪些？</a><span class="post-date">2019-08-30</span></li></ul></div><!--<div class="widget widget_ui_tags"><h3>热门标签</h3><div class="items"><a href="/archives/tag/javascript">JavaScript (324)</a></div></div><div class="widget widget_ui_comments"><h3>最新评论</h3><ul><li><a href="" title=""><img data-src="" class="avatar avatar-100" height="50" width="50"><strong></strong></a></li></ul></div>--></div><div id="leftbar" class="leftbar"><div class="leftbar-con"><div style="text-align: center; width: 160px;"></div></div></div></section><footer class="footer"><div class="container"><p>© 2022 <a href="/">WEB前端开发</a></p><p><a href="/cate88/">工具教程</a> | <a href="/cate71/">前端开发</a> | <a href="/cate61/">常见问题</a> | <a href="/cate129/">操作系统</a> | <a href="/cate103/">编程</a> | <a href="/cate108/">网络安全</a> | <a href="/cate120/">设计</a> | <a href="/cate137/">站长技巧</a></p><div class="footer-gav" style="margin-bottom: 10px ;font-size: 12px;"><img src="https://ss.0133.cn/newimg88/2016/06/beian-gov-cn.png" style="vertical-align: middle; height: 14px;"/><a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2021014202号-2</a></div><div class="footer-qrcode"></div></div></footer><script> window.jsui = { www: '', uri: '/wp-content/themes/dux', ver: '5.2.5', roll: ["1", "2"], ajaxpager: '0', url_rp: '/about' }; </script><script type='text/javascript' src='/wp-content/themes/dux/js/libs/bootstrap.min.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-content/themes/dux/js/loader.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=5.0.2'></script><script async="async" type='text/javascript' src='/wp-content/plugins/akismet/_inc/form.js?ver=4.0.8'></script><script type="text/javascript"> var $win = jQuery(window); var $WindowW = $win.width(); var $threebar = jQuery("#leftbar"); if ($threebar.length) { var offsetT = $threebar.offset().top; $win.on("scroll.leftbar", function () { if ($WindowW >= 1200) { if ($win.scrollTop() >= (offsetT)) { $threebar.find(".leftbar-con").css({ "position": "fixed", "top": 0 }); } else { $threebar.find(".leftbar-con").css("position", "static") } } }); } // Array var imagesArr = []; $('#article-content').find("img").each(function (index, Element) { imagesArr.push(Element) }); mediumZoom(imagesArr, { margin: 24, background: '#FFFFFF', scrollOffset: 0 }) </script><script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-3448069-1', 'css88.com'); ga('send', 'pageview'); </script><script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?08985692e4db1e8be1cff8097c2979b7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script><script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script></body></html>