SVG縮放技巧

SVG（Scalable Vector Graphics） 是一種用於描述二維圖形和基於二維的圖形應用程序的 XML 標記語言，它可以被任何圖形看做是由幾何形狀組合而成。SVG 可以縮放到任意大小而不失真或失去任何質量。

一、SVG縮放居中

SVG圖形縮放居中是許多設計師常常遇到的挑戰。常規的做法是採用CSS技巧來使SVG居中，有兩種常見的方式：

1. 使用CSS Flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

將SVG置於父元素內部，在其父元素上應用CSS Flexbox布局，SVG元素會自動居中。

2. 使用CSS絕對定位

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

將SVG置於絕對定位的子元素中，為其父元素添加相對定位，將SVG元素居中。

二、SVG等比例縮放

為了使SVG圖形不會失真，縮放時應該採用等比例縮放。CSS中可以使用「transform：scale」屬性來進行等比例縮放。例如：

svg{
    height: 100px;
    width: 100px;
    transform: scale(2);
}

上述代碼表示，在SVG原始尺寸的基礎上，將圖形等比例放大2倍。

三、SVG縮放圖片

SVG中可以嵌入圖片，也可以通過CSS樣式設置background-image。無論哪種方式，在縮放時都需要特別注意。使用img來顯示 SVG 圖片時，不如直接在 HTML 中寫入 SVG 代碼，這樣可以利用 SVG 的各種優勢。例如：

<img src="example.svg" alt="Example SVG" width="200" height="200">

<svg viewBox="0 0 200 200" width="100" height="100">
  <use xlink:href="#example" />
</svg>

第一種方式直接使用img標籤，設置寬度和高度。在縮放時，圖形會被拉伸，導致圖像失真。第二種方式使用SVG標籤嵌入圖像，SVG會自動進行等比例縮放，保持圖像不失真。

四、SVG縮放導致頁面卡頓

在進行複雜的SVG縮放時，很容易導致頁面卡頓的問題。這是因為SVG元素內部的DOM結構很複雜，瀏覽器需要經過許多計算才能正確繪製SVG圖形。在這種情況下，我們可以考慮將SVG元素縮放到所需的大小之前，將其存儲在本地，並在需要時載入。在SVG中，可以使用「viewBox」屬性，按需載入指定大小。

五、SVG縮放的方法

除了上述方法外，SVG中還有許多其他的縮放方法：

1. CSS縮放

svg {
  height: 100px;
  width: 100px;
  transform: scale(2);
}

使用CSS屬性「transform: scale」進行縮放。

2. viewBox縮放

使用viewBox屬性設置SVG元素顯示區域，將SVG元素縮放到所需大小。

3. JS縮放

var svg = document.querySelector('svg');
var bbox = svg.getBBox();
var scale = 2;
svg.setAttribute('width', bbox.width * scale);
svg.setAttribute('height', bbox.height * scale);

使用JavaScript來獲取SVG圖形的邊界框，並通過修改SVG元素的寬度和高度實現縮放。

六、SVG縮放和平移

在SVG中，還可以同時使用縮放和平移來實現更複雜的效果。例如：

將SVG元素縮小一半，並將其定位到(25, 25)的位置。

七、SVG縮放失真嗎

在原始SVG尺寸的基礎上進行等比例縮放，SVG圖形不會失真。但是，如果SVG元素的比例被修改，例如將其縮放為非等比例的大小，圖形會失真。

八、SVG縮放後偏移

在SVG縮放時，有時會發現一些元素在縮放後發生了偏移。這是因為SVG在進行縮放時會對其內部單獨的元素進行變換。可以使用屬性「transform-origin」來改變縮放時的原點。例如：

svg {
  transform-origin: 50% 50%;
  transform: scale(2);
}

上述代碼表示將縮放原點改為SVG元素的中心，避免縮放後元素髮生偏移。

九、SVG縮放後設置坐標出現問題

在進行SVG縮放時，我們還需要特別注意元素坐標的設置。例如：

在以上代碼中，當SVG元素進行縮放時，其坐標系也會隨之變化。在進行縮放時，應該根據需要設置元素的新坐標。

十、SVG縮放之後元素線條寬度不變

當SVG元素進行縮放時，其線條寬度不會隨之變化。這是因為SVG中的線條寬度是以像素為單位進行計算的。可以使用屬性「vector-effect」來改變線條寬度的計算單位。例如：

svg path {
  vector-effect: non-scaling-stroke;
  stroke-width: 2px;
}

上述代碼表示使用基於路徑的量來計算線條寬度，縮放時線條寬度不會改變。