SVG初嘗試(二)

阿新 • • 發佈：2019-04-05

fill cal eight 1.0 title edge mpat pre tran

基本圖形

rect(矩形)、circle、ellipse(橢圓)、line(直線)、polyline(折線)、polygon(多邊形)、path(可以繪制任意圖形)

rect

技術分享圖片

x,y定義矩形坐標，矩形左上角的位置
rx、ry定義矩形的圓角，只給一個值，兩者一致

circle

技術分享圖片

cx、cy定義圓的坐標，圓心的位置
r定義圓的半徑

ellipse

技術分享圖片

line

技術分享圖片

polyline

技術分享圖片

polygon

技術分享圖片

基本屬性

fill(填充顏色)、stroke(描邊顏色)、stroke-width(描邊粗細)、transform

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
      <svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
        <rect 
            x="10" 
            y="10" 
            rx="5" 
            ry="5" 
            width="150" 
            height="100" 
            stroke="red" 
            fill="none">
        </rect>
    
        <circle 
            cx="250" 
            cy="60" 
            r="50" 
            stroke="red" 
            fill="none">
        </circle>
    
        <ellipse 
            cx="400" 
            cy="60" 
            rx="70" 
            ry="50" 
            stroke="red" 
            fill="red">
        </ellipse>
    
        <line 
            x1="10" 
            y1="120" 
            x2="160" 
            y2="220" 
            stroke="red">
        </line>
    
        <polyline 
            points="250 120 
                    300 220
                    200 220"
            stroke="red"
            fill="none">
        </polyline>
    
        <polygon 
            points="250 120 
                    300 220
                    200 220"
            stroke="red"
            stroke-width="5"
            fill="yellow"
            transform="translate(150 0)">
        </polygon>
    </svg>
  </div>
</body>
</html>

技術分享圖片

SVG初嘗試(二)

fill cal eight 1.0 title edge mpat pre tran 基本圖形 rect(矩形)、circle、ellipse(橢圓)、line(直線)、polyline(折線)、polygon(多邊形)、path(可以繪制任意圖形) rect x,y定

SVG初嘗試之path

ima alt pat 匯總嘗試 svg http bubuko 基本命令匯總命令基本規律移動和直線命令弧線命令 SVG初嘗試之path

node 爬蟲初嘗試（二）async控制並發量

響應大並發 title 數組並發控制指定 ref gb2312 nav var eventproxy = require(‘eventproxy‘);//並發控制 var async = require(‘async‘);//並發量控制 var express = r

第一次網站初嘗試爬的坑

run 兩個訪問百度 eat text utf-8 float a標簽 ssi 記錄自己做的網站所遇到的問題和Get到的新知識。首先是網頁自動刷新問題：在Head標簽下： <head runat="server"> <%--<meta

SVG 學習<二>進階

div img -1 例如 path scale ext height 技術 SVG分組——g標簽 g標簽在svg標簽內使用，功能用來對圖形，文字，線段進行分組。 HTML代碼 <svg class="svg"> <g class

Tensorflow框架初嘗試————搭建卷積神經網絡做MNIST問題

過擬合 dict cast 官方文檔 float hot blog next 神經網絡 Tensorflow是一個非常好用的deep learning框架學完了cs231n，大概就可以寫一個CNN做一下MNIST了 tensorflow具體原理可以參見它的官方文檔然後C

vue初嘗試--組件

item uic 同步詳細 all add one fault 嘗試 github代碼同步網址組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添

匯編實驗1及博客初嘗試

cut 註冊說明技術大牛我們發表軟件學習輸入 Part 1 這一篇博客應該不是傳說中的技術博客。初聞博客該是小學的計算機課，那個時候老師教我們註冊郵箱註冊博客註冊論壇。註冊完了我們便去玩植物大戰僵屍，不用動腦子的重復性操作。計算機老師也和我們探究了遊戲的本質。

spring原始碼之初嘗試

從啟動類的run()方法開始debug，一步一步step into開啟spring原始碼之旅，目前還只能看個大概，慢慢來吧，得多咀嚼，細品味。原始碼中太多的回撥、錯綜複雜的繼承、實現、反射等思想，一口氣想吞下恐怕是有點奢望，來日方長。下面是別人總結的，我照著debug了一次，

[GUI]nana GUI初嘗試

前幾天群裡討論GUI的時候大家各抒己見，提出了一些非常好的GUI工具和程式碼，大部分都是已經用過的，比如MFC，Qt，DirectUI等等，不過DUI現在基本都是收費的，有一個炫彩介面還不錯，不過只是提供介面和dll，nana就是一位朋友提出來的，說很輕巧，全部是自己寫，很方便，不需要藉助其他的庫。花了一個小

初嘗試在Jenkins下建pipeline型別Job配置使用

在jenkins2.0後出現了pipeline，在使用jenkins一般都會建立自由風格和maven型別的job。每次jenkins構建都是檢視在控制檯輸出的日誌資訊，但是在構建的job時候無法顯示每一步構建的資訊，所以jenkins的pipeline構建完成後繪製了每一次構

CentOS 初體驗二：切換語言，連線網際網路

修改語言當進入 CentOS 的時候，系統預設語言是英文，CentOS 有一個語言選擇框，如下圖：當我們選擇漢語（中國），然後重啟虛擬機器，就可以看到中文的介面了。那麼怎麼再次切換成英文呢？選擇完英文，重啟虛擬機器即可生

中文程式語言之Z語言初嘗試 - ZLOGO 4

@TKT2016 開發的Z語言(ZLOGO是它的一個部分)是本人至今看到的唯一一個仍活躍開發的開源且比較完整的中文程式語言專案. 它的原始碼在TKT2016/ZLanguage3. 此文從使用者角度嘗試一下ZLOGO的功能, 並記錄一些過程中的發現. 首先上一個看完教程後自己寫的螺旋

OpenWRT下web框架初嘗試之總結

OpenWRT下web總結目錄目錄 1 參考資料 7 第一章 Web框架以及實現第一節 luci框架 OpenWRT的web採用的是luci框架，該框架採用了MVC的設計模式。在luci目錄下有三個重要的目錄：controller、m

Nginx初嘗試與教程

安裝下載地址：http://nginx.org/en/download.html 下載解壓到 D:nginx/ CMD執行命令： D: cd nginx start nginx Nginx基礎命令檢視nginx的版本號：nginx -v 驗證配置是否正確:

MVVM初嘗試--UITableView資料Manager思路分享

本豺狼最近忙於新需求開發, 荒於研究, 心中倍感焦慮, 不過恰好專案中進行了一些新的嘗試, 自覺收穫頗豐, 趕緊著與諸位分享!大體說下情況吧, 豺狼這期的需求中有一塊是修改詳情頁的模組順序及UI, 由於這個詳情頁是很老的程式碼了, 十多個模組並且基於UITableView開

跨平臺視訊播放器——jplayer初嘗試

專案需要展示一個企業宣傳片，遂去網上尋找一些能提供適應html5和非html5的視訊播放器框架，找了一天下了好多js視訊播放器框架，對比了好多demo發現了一個相對不錯的框架“jplayer”，它是基於jQuery的，剛好jquery稍微熟一點，所以果斷決定使用他了。

SpringMVC整合Swagger2，初嘗試和遇到的相關問題

本文章更新頁請至：http://blog.csdn.net/MikeLC7/article/details/75088123 之前專案的介面文件都是手動編寫Word文件來做，製作成本較高，並且在進行版本迭代的時候進行標註和說明不是很方便，後來發現Swagger之後進行了簡

iOS開發-------塗鴉板(UIBezierPath 貝賽爾曲線)與 MVC初嘗試

塗鴉板，顧名思義就是能夠在上面畫點東西，貝賽爾曲線(UIBezierPath)，也可以叫做貝賽爾路徑。因為path的直譯就是路徑，看起來很高大上，之前樓主也確實這麼認為的，很高大上，細細瞭解，其實也不難，畢竟難的東西蘋果都給我們封裝好了。初次用MVC模式來

柵欄（CyclicBarrier）初嘗試

以下是柵欄的一個簡單例子：package JavaDay6_02; import java.util.concurrent.BrokenBarrierException; import java.util.concurrent.CyclicBarrier; /**

SVG初嘗試(二)

基本圖形

rect

circle

ellipse

line

polyline

polygon

基本屬性

示例

相關推薦