盗墓笔记,雪鹰领主

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

一篇文章教會(huì)你使用SVG畫橢圓

SVG 元素用于繪制橢圓。橢圓是高度和寬度不相等的圓。換句話說(shuō)，它在x和y方向上的半徑是不同的。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、宜州網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、宜州網(wǎng)絡(luò)營(yíng)銷、宜州企業(yè)策劃、宜州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供宜州建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

一、SVG橢圓示例

示例（畫橢圓）：

運(yùn)行后的結(jié)果:

解析：

橢圓cx , cy像圓一樣居中。

但是x和y方向上的半徑由兩個(gè)屬性（而不是一個(gè)）指定：rx和ry屬性。就像看到rx 屬性具有比該ry屬性具有更高的值，從而使橢圓寬于其高度。將rx和ry屬性設(shè)置為相同的數(shù)字將生成圓圈。

1. stroke-width邊框?qū)挾仍O(shè)置

可以使用 style屬性 stroke-width設(shè)置橢圓的邊框?qū)挾取?/p>

例：

運(yùn)行后結(jié)果圖像:

二、虛線邊框橢圓

還可以使用style屬性stroke-dasharray使橢圓的筆劃變?yōu)樘摼€。

例：

 
 
 
 
  
  
  
  
  
  
  
              
  
  
  
  
                 stroke-dasharray: 10 5;fill: none;" />

本示例將虛線寬度設(shè)置為10，虛線空間（虛線之間的間隔）設(shè)置為5。

這是渲染橢圓時(shí)的外觀 :

三、透明邊框

可以使用style屬性stroke-opacity使SVG橢圓的邊框變?yōu)榘胪该鳌?/p>

例：

 
 
 
 
  
  
  
  
  
  
  
      
  
  
  
  
             style="stroke: #ff0000;
  
  
  
                     stroke-width: 5;
  
  
  
                     fill: none;">
  
  
  
  
  
  
  
      
  
  
  
  
             style="stroke: #0000ff;
  
  
  
                     stroke-width: 5;
  
  
  
                     stroke-opacity: 0.5;
  
  
  
                     fill: none;">

代碼運(yùn)行后SVG橢圓效果如下:

注意

第二個(gè)（藍(lán)色）橢圓是透明的，以及如何通過(guò)其筆劃看到紅色的橢圓。

四、橢圓填充

可以使用fill樣式屬性來(lái)填充橢圓。

例：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
         stroke-width: 5;
  
  
  
                 fill: #ff6666;"/>

運(yùn)行后SVG橢圓的外觀 :

五、填充有透明度

fill-opacity樣式屬性可被用來(lái)設(shè)置一個(gè)橢圓的填充顏色的不透明度（透明性）。

例：

 
 
 
 
  
  
  
  
  
  
  
              
  
  
  
  
                       stroke-width: 5;
  
  
  
                         fill: none;">
  
  
  
  
  
  
  
              
  
  
  
  
                       fill: #0000ff;
  
  
  
                         fill-opacity: 0.5;">

橢圓在渲染時(shí)的外觀效果圖如下:

注意

第二個(gè)（藍(lán)色）橢圓是半透明的，從而使紅色的橢圓可見(jiàn)。

六、總結(jié)

本文基于SVG 基礎(chǔ)，利用SVG畫不同樣式的橢圓，透明邊框，橢圓填充，添加填充透明度。以及在實(shí)際開發(fā)項(xiàng)目中需要注意的點(diǎn)，遇到的一些難點(diǎn)，都提供了一些有效等等解決方案。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

代碼很簡(jiǎn)單，希望能夠幫助讀者更好的去學(xué)習(xí)SVG。

本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。

網(wǎng)站標(biāo)題：一篇文章教會(huì)你使用SVG畫橢圓
網(wǎng)址分享：http://fisionsoft.com.cn/article/ccegogp.html

新聞中心

其他資訊