有沒有辦法讓我<path>在SVG-File 中居中？
這是我的 SVG：xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
<rect width="100%" height="100%" fill="#444444" />
<path d="M5.7 0L1.4 10.985V55.88h15.284V64h8.597l8.12-8.12h12.418l16.716-16.716V0H5.7zm51.104 36.3L47.25 45.85H31.967l-8.12 8.12v-8.12H10.952V5.73h45.85V36.3zM47.25 16.716v16.716h-5.73V16.716h5.73zm-15.284 0v16.716h-5.73V16.716h5.73z" fill="#6441A4" />
</svg>uj5u.com熱心網友回復：
添加合適的變換。這似乎相當接近：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
<rect width="100%" height="100%" fill="#444444" />
<path fill="#6441A4"
transform="translate(3.95 3.95)"
d="M5.7 0L1.4 10.985V55.88h15.284V64h8.597l8.12-8.12h12.418l16.716-16.716V0H5.7zm51.104 36.3L47.25 45.85H31.967l-8.12 8.12v-8.12H10.952V5.73h45.85V36.3zM47.25 16.716v16.716h-5.73V16.716h5.73zm-15.284 0v16.716h-5.73V16.716h5.73z"/>
</svg>uj5u.com熱心網友回復：
另一個快速修復可能是設定負 viewBox x/y 值，如下所示：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.95 -3.95 72 72" >
<rect x="-3.95" y="-3.95" width="100%" height="100%" fill="#444444" />
<path fill="#6441A4"
d="M5.7 0L1.4 10.985V55.88h15.284V64h8.597l8.12-8.12h12.418l16.716-16.716V0H5.7zm51.104 36.3L47.25 45.85H31.967l-8.12 8.12v-8.12H10.952V5.73h45.85V36.3zM47.25 16.716v16.716h-5.73V16.716h5.73zm-15.284 0v16.716h-5.73V16.716h5.73z"/>
</svg>
有點 hacky，特別是如果您需要像<rect>.
通過重新計算路徑坐標進行居中和縮放
最有可能的是，轉換作業得非常好，應該是您的首選。
如果您需要“硬編碼”您的轉換 - 它并不太復雜：
顯示代碼片段
let svg = document.querySelector(".svg");
let path = svg.querySelector("path");
let bBox = svg.getBBox();
let vBox = svg.getAttribute("viewBox");
let vBoxArr = vBox ? vBox.split(" ") : [0, 0, bBox.width, bBox.height];
scalePathProportional(path, 0.75);
centerPath(path, true, true);
function centerPath(path, centerX= true, centerY=true, precision=3, render=true){
let svg = path.closest('svg');
let viewBox = svg.getAttribute('viewBox');
let bBox = svg.getBBox();
viewBox = viewBox ? viewBox.split(' ') : ([bBox.x, bBox.y, bBox.width, bBox.height]);
let offXnorm = viewBox[0] * (-1);
let offYnorm = viewBox[1] * (-1);
// convert to relative to move only M
let dRel = snapPathToRelative(path, 1);
let pathBB = path.getBBox();
let pX = pathBB["x"];
let pY = pathBB["y"];
// get x/y offsets to center path
let shiftX = (viewBox[2] - pathBB.width) / 2 - pX ;
let shiftY = (viewBox[3] - pathBB.height) / 2 - pY;
// save them to pathData
dRel[0][1] = (dRel[0][1] shiftX).toFixed(precision) * 1;
dRel[0][2] = (dRel[0][2] shiftY).toFixed(precision) * 1;
// apply change
if(render){
path.setAttribute('d',dRel.toString());
}
return dRel;
}
//scale to path to width and height by units or percentages
function scalePathProportional(path, scale=1) {
let svg = path.closest("svg");
let pathData = path.getPathData();
pathData.forEach(function (command, p) {
let coords = command.values;
//scale coordinates if viewBox < 1000 units
if (scale!==1) {
coords.forEach(function (el, i) {
coords[i] = coords[i] * scale;
});
}
});
path.setPathData(pathData);
return pathData;
}
function snapPathToRelative(path, precicion=null, render=false){
let d = path.getAttribute('d');
let pathRel = Snap.path.toRelative(d);
if(precicion){
roundCoords(pathRel)
}
if(render){
path.setAttribute('d', pathRel.toString());
}
return pathRel;
}
function roundCoords(commands, decimals=1){
commands.forEach(function (coordinates, i) {
let coordRelative = [];
coordinates.forEach(function (coordinate, v) {
if (typeof coordinate === 'number') {
coordinate = (coordinate).toFixed(decimals) * 1
}
coordRelative.push(coordinate);
});
commands[i] = coordRelative;
});
//console.log(commands)
return commands;
}svg {
display: inline-block;
height: 5em;
font-size: 1em;
border: 1px solid #ccc;
background-color:#444;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/path-data-polyfill.min.js"></script>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
<rect width="100%" height="100%" fill="#444444" />
<path d="M5.7 0L1.4 10.985V55.88h15.284V64h8.597l8.12-8.12h12.418l16.716-16.716V0H5.7zm51.104 36.3L47.25 45.85H31.967l-8.12 8.12v-8.12H10.952V5.73h45.85V36.3zM47.25 16.716v16.716h-5.73V16.716h5.73zm-15.284 0v16.716h-5.73V16.716h5.73z" fill="#6441A4" />
</svg>按比例縮放 d 坐標
需要回圈遍歷所有路徑命令并將所有坐標乘以縮放因子（如 0.75）。要獲取路徑資料，我使用Jarek Foksa 的 pathData polyfill
居中路徑
涉及父 svg 的 viewBox 和實際路徑的邊界（通過 檢索）之間的一些比較path.getBBox()。
要實際將路徑水平和垂直移動 x/y 偏移量，我們可以通過將路徑命令轉換為相對坐標來簡化任務（使用snap.svg's toRelative(d)。
現在我們只需要更改 M 命令的 x/y 坐標（另見 Lea Verou's發布將 SVG 路徑轉換為全相對或全絕對命令）
**免責宣告：不適合現場使用**
此方法應用于自定義 svg 預優化。所以運行腳本 - 重新保存你的 svg 資產。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432805.html