SVG 可縮放向量圖形 - daniel-qa/Vue GitHub Wiki

SVG 有自己的一套 DOM 元素：

有 fill 的，就是 svg

  • 文字
<text x="50" y="50" fill="black" font-size="16">Hello</text>
  • 基本形狀
<!-- 矩形 -->
<rect x="10" y="10" width="100" height="50" fill="blue" />

<!-- 圓形 -->
<circle cx="50" cy="50" r="30" fill="red" />

<!-- 橢圓 -->
<ellipse cx="50" cy="50" rx="80" ry="40" fill="green" />

<!-- 直線 -->
<line x1="0" y1="0" x2="100" y2="100" stroke="black" />

<!-- 折線 -->
<polyline points="0,0 50,50 100,0" stroke="blue" fill="none" />

<!-- 多邊形 -->
<polygon points="50,0 100,100 0,100" fill="orange" />
  • SVG 顏色和框線SVG 的顏色屬性有兩個：
SVG 屬性 對應 CSS 用途說明
fill background-color 填充顏色（內部）
stroke border-color 線條顏色（邊框）

舉例：

<!-- 一個有藍色邊框、紅色填充的矩形 -->
<rect 
  fill="red"       ← 內部填紅色
  stroke="blue"    ← 邊框線條藍色
  stroke-width="2" ← 線條粗細
/>

最常見（推薦）

stroke-width: 2;

👉 等同於 2px（在 SVG 裡預設是 user units）

所以你的 dv-border-box-11 邊框：

fill → 控制多邊形區塊的填充色

stroke → 控制邊框線條的顏色

  • 讓框內有一點淡淡的藍色背景感，但又不會太搶眼，讓裡面的內容（課中統計的數字和文字）仍然清晰可見
fill: rgba(219, 234, 254, 0.15) !important; /* 

┌─────────────────────┐  ← path/polygon 畫出邊框形狀
│                     │
│   border-box 內容   │  ← fill 就是這個區域的顏色
│                     │
└─────────────────────┘

fill: rgba(219, 234, 254, 0.15) 的意思是：

219, 234, 254 → 淡藍色

0.15 → 15% 不透明（非常透明，幾乎看不到顏色）

  • 直接改 color（最正統）
<dv-border-box-11
  :title="$t('schoolIot.classrooming.title')"
  :color="['#568aea', 'transparent']"
/>

👉 transparent = 讓第二條線消失

👉 這就是你要的「不要黑色」

⚠️ **GitHub.com Fallback** ⚠️