首页 > 代码库 > [javascript svg fill stroke stroke-width circle 属性讲解] svg fill stroke stroke-width circle 属性 绘制圆形及引入方式讲解
[javascript svg fill stroke stroke-width circle 属性讲解] svg fill stroke stroke-width circle 属性 绘制圆形及引入方式讲解
1 <!DOCTYPE html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Insert you title</title> 5 <meta name=‘description‘ content=‘this is my page‘> 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=http://www.mamicode.com/‘./css/index.css‘ />"color: #008080;"> 9 <script type=‘text/javascript‘ src=http://www.mamicode.com/‘./js/jquery-1.12.1.min.js‘></script>"color: #008080;">10 <style type=‘text/css‘>11 html,body,div,svg {12 margin: 0; padding: 0;13 }14 15 #wrap {16 width: 500px; height: 450px; border: 1px solid #999; border-radius: 2px; margin: 25px auto;17 }18 19 svg {20 height: 100%; width: 100%;21 /* 在谷歌浏览器中如果不指定svg的大小,那么使用默认的300*150大小(将焦点放置在调控台{Element}中的标签上可以检查),但是在火狐中表现却不同22 即使我们不指定svg的大小,指定父元素的大小,那么svg的大小将继承父元素;23 */24 }25 </style>26 <script type=‘text/javascript‘>27 $( function(){28 29 } );30 </script>31 </head>32 <body>33 <div id=‘wrap‘>34 <svg xmlns=‘http://www.w3.org/2000/svg‘ version=‘1.1‘>35 <!-- 36 在html文件中的引入方式 :37 参数解析 : xmlns(XML nameSpace 译为XML文档的命名空间 ) 地址为:http://www.w3.org/2000/svg XML的版本号位1.1, 默认的"画布"大小300*15038 在svg中和canvas画布不同的是,canvasReading2D提供了很多属性和方法,但是在svg中我们只需使用标签就可以实现基本的图形绘制了,如果要实现高级的图形效果还是要结合JS的39 -->40 <circle cx=‘250‘ cy=‘225‘ r=‘50‘ fill=‘ #09F3C7 ‘ stroke=‘#C7F309‘ stroke-width = ‘3‘></circle> 41 <!-- 参数解析 cx cy 圆心坐标 r 半径 默认填充形式 填充颜色为黑色 如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" -->42 </svg>43 </div>44 </body>45 </html>
[javascript svg fill stroke stroke-width circle 属性讲解] svg fill stroke stroke-width circle 属性 绘制圆形及引入方式讲解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。