應用 SVG動態 時鐘

2022-09-06 02:33:12 字數 3649 閱讀 4859

沒有做秒針，只做了分針和時針，5分鐘以後來看應該可以看到效果╮(╯-╰)╭

doctype html


>


<


html


>


<


head


>


<


title


>


title


>


<


script


>


function


updatetime()


script


>


<


style


>


/*下面定義的所有css樣式後悔作用在svg元素上


*/#clock


#face


/*時鐘的外邊框


*/#ticks


/*標記每個小時的線段


*/#hourhand


/*相對較粗的時針


*/#minutehand


/*相對較細的分針


*/#numbers


style


>


head


>


<


body 


onload


="updatetime()"


>


<


svg 


id="clock"


viewbox


="0 0 100 100"


width


="500"


height


="500"


>


<


defs


>


<


filter 


id="shadow"


x="-50%"


y="-50%"


width


="200%"


height


="200%"


>


<


fegaussianblur 


in="sourcealpha"


stddeviation


="1"


result


="blur"


/>


<


feoffset 


in="blur"


dx="1"


dy="1"


result


="shadow"


/>


<


femerge


>


<


femergenode 


in="sourcegraphic"


/>


<


femergenode 


in="shadow"


/>


femerge


>


filter


>


defs


>


<


circle 


id="face"


cx="50"


cy="50"


r="45"


/>


<


g id


="ticks"


>


<


line 


x1="50"


y1="5.000"


x2="50.00"


y2="10.00"


/>


<


line 


x1="72.50"


y1="11.03"


x2="70.00"


y2="15.36"


/>


<


line 


x1="88.97"


y1="27.50"


x2="84.64"


y2="30.00"


/>


<


line 


x1="95.00"


y1="50.00"


x2="90.00"


y2="50.00"


/>


<


line 


x1="88.97"


y1="72.50"


x2="84.64"


y2="70.00"


/>


<


line 


x1="72.50"


y1="88.97"


x2="70.00"


y2="84.64"


/>


<


line 


x1="50.00"


y1="95.00"


x2="50.00"


y2="90.00"


/>


<


line 


x1="27.50"


y1="88.97"


x2="30.00"


y2="84.64"


/>


<


line 


x1="11.03"


y1="72.50"


x2="15.36"


y2="70.00"


/>


<


line 


x1="5.000"


y1="50.00"


x2="10.00"


y2="50.00"


/>


<


line 


x1="11.03"


y1="27.50"


x2="15.36"


y2="30.00"


/>


<


line 


x1="27.50"


y1="11.03"


x2="30.00"


y2="15.36"


/>


g>


<


g id


="numbers"


>


<


text 


x="50"


y="18"


>12


text


>


<


text 


x="85"


y="53"


>3


text


>


<


text 


x="50"


y="88"


>6


text


>


<


text 


x="15"


y="53"


>9


text


>


g>


<


g id


="hands"


filter


="url(#shadow)"


>


<


line 


id="hourhand"


x1="50"


y1="50"


x2="50"


y2="24"


/>


<


line 


id="minutehand"


x1="50"


y1="50"


x2="50"


y2="20"


/>


g>


svg>


body


>


html


>
效果圖如下：

js動態建立svg

下面的這段寫法，可以做到在原生js中，動態插入能相容ios7 8的svg影象，ios7 8命名空間的ns物件的直接innerhtml寫入應該是有問題。var icon document.createelementns svg 建立帶有標準svg命名空間的節點 svghack document.cre...

svg簡單的應用

1 可以直接在html內寫svg 1 width寬度，height高度 2 xmlns svg的規則 2 rect節點 1 長方形 2 x y位置 3 rx ry圓大小 4 fill填充顏色 3 circle節點 1 圓形 2 cx cy位置 3 r圓直徑 4 fill填充顏色 4 path畫線節點...

畫動態時鐘

import cv2 import math import datetime import numpy as np margin 5 上下左右邊距 radius 220 圓的半徑 center center x,center y 225,225 圓心 1.新建乙個畫板並填充成白色 img np.ze...