SVG與CSS

一、SVG與CSS的介紹

SVG（可縮放矢量圖形）是用於描述二維矢量圖形的XML標記語言。其可以通過文本編輯器進行編輯，也可以通過JavaScript動態操作SVG元素。與常規圖像文件（如JPEG、PNG）不同，SVG圖像是矢量圖形，其可以縮放到任意大小而不會降低其質量。

CSS（層疊樣式表）是一種用於描述文檔展示樣式的語言。其可以為HTML和XML等文檔定義顏色、字體、頁面布局等方面的樣式。

二、SVG與CSS的結合使用

SVG與CSS可以結合使用，通過CSS對SVG元素進行樣式設置，使其更加美觀和易讀。常見的CSS樣式設置包括填充顏色、描邊樣式、漸變效果等。

/* SVG元素的樣式設置 */
svg {
  width: 100%; /* 設置SVG元素寬度為100% */
  height: 100%; /* 設置SVG元素高度為100% */
}

/* 矩形元素的樣式設置 */
rect {
  fill: #FFC107; /* 設置填充顏色為黃色 */
  stroke: black; /* 設置描邊顏色為黑色 */
  stroke-width: 2px; /* 設置描邊寬度為2像素 */
}

/* 文本元素的樣式設置 */
text {
  font-size: 20px; /* 設置字體大小為20像素 */
  fill: white; /* 設置字體顏色為白色 */
}

/* 漸變元素的樣式設置 */
linearGradient stop {
  stop-color: #E91E63; /* 設置漸變顏色為粉色 */
}

三、SVG與CSS的動態操作

SVG與CSS結合使用的另一個重要特點是可以通過JavaScript動態操作SVG元素，實現更加豐富的動態效果。其中，可以通過JavaScript獲取SVG元素的屬性值，比如顏色等，進而通過CSS樣式設置元素樣式。

/* JavaScript動態修改SVG元素樣式 */
var myRect = document.getElementById("my-rect"); /* 獲取矩形元素 */
myRect.style.fill = "blue"; /* 修改矩形元素填充顏色 */
myRect.style.stroke = "red"; /* 修改矩形元素描邊顏色 */

四、SVG與CSS的應用案例

SVG與CSS結合使用廣泛應用於Web頁面的圖形展示、動態效果製作等方面。例如，通過SVG和CSS實現的餅狀圖，可以讓數據得以生動的展示，同時讓頁面更加美觀、易讀。

  
  
  40%


/* CSS部分 */
circle:last-child {
  animation: move 2s linear forwards;
}

@keyframes move {
  to {
    stroke-dashoffset: calc(157 - (157 * 40 / 100));
  }
}

五、總結

SVG與CSS結合使用可以讓Web頁面展示更加豐富、簡潔、易讀的圖形，並能夠通過JavaScript實現動態效果。學習SVG和CSS結合使用，對於Web前端開發專業人士較為重要。