資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使 SVG 與其父容器等比例縮放
SVG，或可縮放向量圖形，是一種基於 XML 的標記語言，用於生成向量圖形。SVG 影像可以縮放至任何大小而不會損失質量，因為它們獨立於解析度。對於必須在具有不同螢幕寬度的多種裝置上檢視的視覺效果設計，它們是最佳選擇。在本文中，我們將討論如何使 SVG 與其父容器等比例縮放。我們將介紹 SVG 的基礎知識、如何設計 SVG 以及如何使其響應式。
什麼是 SVG？
在學習如何使 SVG 與其父容器等比例縮放之前，讓我們首先定義 SVG。
SVG 是一種基於 XML 的向量圖形標記語言。與由畫素（如 JPG 或 PNG 中的畫素）組成的光柵圖形不同，向量圖形由用數學方程式指定的形狀、線條和曲線組成。
SVG 影像可以縮放至任何大小而不會損失質量。因此，它們是設計必須在具有不同螢幕寬度的多種裝置上檢視的視覺效果的最佳選擇。SVG 影像非常可定製，可以使用 CSS 和 JavaScript 進行修改。
方法
可以使用以下兩種方法之一使 SVG 與其父容器等比例縮放：
利用 CSS。
利用 JavaScript。
讓我們深入瞭解這兩種方法：
方法 1：利用 CSS
可以使用 CSS 使 SVG 與其父容器等比例縮放。需要遵循的步驟：
步驟 1 - 將父容器的寬度和高度調整為您希望 SVG 擁有的尺寸。
步驟 2 - 將 SVG 新增到父容器中。
步驟 3 - 使用 CSS 將 SVG 的寬度和高度設定為 100%。
步驟 4 - 使用 preserveAspectRatio 屬性確保 SVG 的縱橫比保持不變。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parentContainer {
width: 400px;
height: 400px;
}
svg {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="parentContainer">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<!-- Placing SVG content here -->
<circle cx="20" cy="20" r="15" stroke="black" stroke-width="2" fill="green" />
</svg>
</div>
</body>
</html>
方法 2：利用 JavaScript
也可以使用 JavaScript 使 SVG 與其父容器等比例縮放。以下是縮放 svg 需要遵循的步驟。
步驟 1 - 獲取對 SVG 和父容器的引用。
步驟 2 - 將父容器的寬度和高度設定為 SVG 的寬度和高度。
步驟 3 - 使用 preserveAspectRatio 屬性確保 SVG 的縱橫比保持不變。
步驟 4 - 在視窗調整大小時，向 window 物件新增事件監聽器。
步驟 5 - 在視窗調整大小時，更新 SVG 的寬度和高度以匹配父容器的寬度和高度。
示例
<!DOCTYPE html>
<html lang="en">
<body>
<div class="parentContainer">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<!-- Placing SVG content here -->
<circle cx="20" cy="20" r="15" stroke="black" stroke-width="2" fill="green" />
</svg>
<!--add a script tag for adding javascript-->
<script>const parent = document.querySelector('.parentContainer');
const svg = parent.querySelector('svg');
function scaleSVG() {
const { width, height } = parent.getBoundingClientRect();
svg.setAttribute('height', height);
svg.setAttribute('width', width);
}
window.addEventListener('resize', scaleSVG);
scaleSVG();
</script>
</body>
</html>
注意
圓形和矩形是 SVG 中的一些基本形狀元素，可用於建立各種美學設計。
要生成圓形，使用 circle 元素，要生成矩形，使用 rect 元素。
這兩個元素都可以使用 CSS 屬性（如 fill 和 stroke）以及 stroke-width 來更改其外觀。
這兩個元素還可以透過應用諸如 translate、rotate 和 scale 之類的轉換來更改其位置、旋轉和大小。
這些元素是 SVG 圖形的基本構建塊，可以與各種形狀和元件組合以建立複雜的圖案。
多邊形、線條、路徑、橢圓和弧線是可以在 SVG 中建立的一些其他基本形狀。
結論
總而言之，SVG 是一種靈活且適應性強的向量圖形標記語言。可以使用 CSS 或 JavaScript 使 SVG 與其父容器等比例縮放，從而實現響應式設計。由於設計人員可以使用它們建立可以縮放至任何大小而不會降低質量的高質量視覺效果，因此 SVG 是在多種裝置上檢視的絕佳選擇。
7K+ 次檢視
