window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

顯示具有 標簽 svg @ 矢量圖形 標籤的文章。 顯示所有文章
顯示具有 標簽 svg @ 矢量圖形 標籤的文章。 顯示所有文章

svg

標簽 svg @ 矢量圖形

circle=圓形  cx=X座標  cy=Y座標  r=圓形半徑  fill=物件颜色  stroke=邊框颜色  stroke-width=邊框寬度
<svg width="130%" height="100px">
       <circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<svg width="100px" height="100px">
       <circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<svg width="100px" height="120px">
       <circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<svg width="130px" height="120px">
       <ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" /> 
</svg>
rect=矩形 x=X座標 y=Y座標 rx=X圓角 ry=Y圓角 width=矩形寬度 height=矩形高度 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="100%" height="100%">
        <rect x="20" y="35" width="50" height="50" stroke="black"
        fill="yellow" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" width="50" height="50" stroke="red"
        fill="blue"  /> 
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" width="80" height="50" stroke="red"
        stroke-width="3" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" rx="15" ry="15" width="100"
        height="50"
        style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" rx="50" ry="50" width="100"
        height="50"
        style="fill:none;stroke:black;stroke-width:5;" />
</svg>
polyline=連接的直線  fill=物件颜色  stroke=邊框颜色  stroke-width=邊框寬度 
points="x1 y1,x2,y2,x3 y3,....
<svg width="150px" height="150px">
          <polyline  fill="yellow" stroke="red" stroke-width="3"
          points="5 30, 30 60,60 5,90 60,120 30,120 100,
          5 100,5 30" />
</svg>
html.ug5g.com
<svg style="font-size: 20px ;">
       <text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
ug5g.com
<svg style="font-size: 20px ;">
     <defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
          <text x="10" y="100" style="fill:red;">
               <textPath xlink:href="#path1">ug5g.com</textPath>
        </text>
</svg>
https: html.ug5g .com
<svg style="font-size: 20px ;">
        <text x="10" y="20" style="fill:red;">https:
               <tspan x="10" y="45">html.ug5g</tspan>
              <tspan x="10" y="70">.com</tspan>
      </text>
</svg>
00
#html <svg> #html 伸縮矢量圖形

svg

circle=圓形  cx=X座標  cy=Y座標  r=圓形半徑  fill=物件颜色  stroke=邊框颜色  stroke-width=邊框寬度
<svg width="130%" height="100px">
       <circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<svg width="100px" height="100px">
       <circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<svg width="100px" height="120px">
       <circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<svg width="130px" height="120px">
       <ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" /> 
</svg>
rect=矩形 x=X座標 y=Y座標 rx=X圓角 ry=Y圓角 width=矩形寬度 height=矩形高度 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="100%" height="100%">
        <rect x="20" y="35" width="50" height="50" stroke="black"
        fill="yellow" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" width="50" height="50" stroke="red"
        fill="blue"  /> 
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" width="80" height="50" stroke="red"
        stroke-width="3" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" rx="15" ry="15" width="100"
        height="50"
        style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="100%" height="100%">
        <rect x="20" y="35" rx="50" ry="50" width="100"
        height="50"
        style="fill:none;stroke:black;stroke-width:5;" />
</svg>
polyline=連接的直線  fill=物件颜色  stroke=邊框颜色  stroke-width=邊框寬度 
points="x1 y1,x2,y2,x3 y3,....
<svg width="150px" height="150px">
          <polyline  fill="yellow" stroke="red" stroke-width="3"
          points="5 30, 30 60,60 5,90 60,120 30,120 100,
          5 100,5 30" />
</svg>
html.ug5g.com
<svg style="font-size: 20px ;">
       <text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
ug5g.com
<svg style="font-size: 20px ;">
     <defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
          <text x="10" y="100" style="fill:red;">
               <textPath xlink:href="#path1">ug5g.com</textPath>
        </text>
</svg>
https: html.ug5g .com
<svg style="font-size: 20px ;">
        <text x="10" y="20" style="fill:red;">https:
               <tspan x="10" y="45">html.ug5g</tspan>
              <tspan x="10" y="70">.com</tspan>
      </text>
</svg>
00
#html <svg>#html 伸縮矢量圖形