> 웹 프론트엔드 > HTML 튜토리얼 > HTML5 SVG绘制圆形简单示例分享_html/css_WEB-ITnose

HTML5 SVG绘制圆形简单示例分享_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:26:05
원래의
1413명이 탐색했습니다.

今天分享“svg绘制圆形”部分

1、简单圆形

效果图如下:

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <circle cx="40" cy="40" r="40"></circle></svg>
로그인 후 복사

代码解析:

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0);

r属性定义圆的半径

2、圆形填充颜色及边框

效果图如下:

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <circle cx="45" cy="45" r="40" stroke-width="3" stroke="blue" fill="red"></circle></svg>
로그인 후 복사

 

代码解析:

fill 属性定义圆形的填充颜色(rgb 值、颜色名或者十六进制值);

stroke-width 属性定义圆形边框的宽度;

stroke 属性定义圆形边框的颜色

 

好了今天的分享这里结束,我也是一边学习一边分享的,若有错误的地方请大家指正,下次分享“svg绘制椭圆”部分,希望大家届时来浏览,谢谢大家。

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿