在SVG中心對齊對象

如何對齊svg標籤中心內的對象。我可以通過調整viewbox中的x，y cordiantes使其對齊。但每次我需要根據對象的大小更改值。我怎樣才能實現在任何大小的對象的SVG各自的SVG中心。爲了更清楚我希望圖標在紅色邊框內水平和垂直居中。請參閱下在SVG中心對齊對象

svg{ 
 
    border:1px solid red; 
 
}

<svg height="20" width="20" viewBox="0 0 35 35"> 
 
\t <path fill="#6d6d6d" fill-rule="evenodd" d="M19.0625,8.75 C18.81,8.75 18.585,8.6475 18.415,8.4875 C18.41,8.4825 18.4025,8.4825 18.3975,8.4775 L16.0675,6.145 L10.1675,12.045 C9.5575,12.6525 8.5675,12.6525 7.9575,12.045 C7.3475,11.435 7.3475,10.445 7.9575,9.835 L13.855,3.9375 L11.5225,1.6025 C11.5175,1.5975 11.5175,1.59 11.5125,1.585 C11.3525,1.415 11.25,1.19 11.25,0.9375 C11.25,0.42 11.67,0 12.1875,0 L18.75,0 C19.44,0 20,0.56 20,1.25 L20,7.8125 C20,8.33 19.58,8.75 19.0625,8.75 Z M2.5,5.625 L2.5,16.875 C2.5,17.22 2.78,17.5 3.125,17.5 L14.375,17.5 C14.72,17.5 15,17.22 15,16.875 L15,10 L17.5,12.5 L17.5,17.5 C17.5,18.8825 16.3825,20 15,20 L2.5,20 C1.12,20 0,18.8825 0,17.5 L0,5 C0,3.62 1.12,2.5 2.5,2.5 L7.5,2.5 L10,5 L3.125,5 C2.78,5 2.5,5.28 2.5,5.625 Z"/> 
 
</svg>

來源

2017-01-10 Santhosh Kumar

你是怎麼想出長'35'像素的視框中？你是否總是在35像素的viewbox中有一個不同大小的「路徑」？ – Yogu

我在不同的地方重複使用這個圖標。我將在viewbox中將35更改爲25。此時我需要手動更改x，y座標以將其居中。所以我正在尋找動態解決方案來集中它 –

那麼，爲什麼你要指定一個與其中的'path'不匹配的viewbox呢？你用它來縮放嗎？您可以使用'width'和'height'縮放SVG，然後將svg'居中在其父元素中。 – Yogu

我的代碼，你可以移動min-x和min-y座標放置在中心內容。 viewBox的描述可以在這裏找到： https://sarasoueidan.com/blog/svg-coordinate-systems/

更好的方法去做它是導出文件與正確的邊界框，讓它完全中心對齊。打開您的SVG（素描）增加了一個無形的盒子周圍的35×35px，它出口到整個事情，清理了：

svg { 
 
    border: 1px solid red; 
 
}

<svg width="20px" height="20px" viewBox="0 0 35 35"> 
 
    <path fill="#6d6d6d" fill-rule="evenodd" d="M26.15625,16.875 C25.929,16.875 25.7265,16.78275 25.5735,16.63875 C25.569,16.63425 25.56225,16.63425 25.55775,16.62975 L23.46075,14.5305 L18.15075,19.8405 C17.60175,20.38725 16.71075,20.38725 16.16175,19.8405 C15.61275,19.2915 15.61275,18.4005 16.16175,17.8515 L21.4695,12.54375 L19.37025,10.44225 C19.36575,10.43775 19.36575,10.431 19.36125,10.4265 C19.21725,10.2735 19.125,10.071 19.125,9.84375 C19.125,9.378 19.503,9 19.96875,9 L25.875,9 C26.496,9 27,9.504 27,10.125 L27,16.03125 C27,16.497 26.622,16.875 26.15625,16.875 Z M11.25,14.0625 L11.25,24.1875 C11.25,24.498 11.502,24.75 11.8125,24.75 L21.9375,24.75 C22.248,24.75 22.5,24.498 22.5,24.1875 L22.5,18 L24.75,20.25 L24.75,24.75 C24.75,25.99425 23.74425,27 22.5,27 L11.25,27 C10.008,27 9,25.99425 9,24.75 L9,13.5 C9,12.258 10.008,11.25 11.25,11.25 L15.75,11.25 L18,13.5 L11.8125,13.5 C11.502,13.5 11.25,13.752 11.25,14.0625 Z" /> 
 
</svg>

來源

2017-01-10 07:34:41 mlunoe

你可以使用getBBox（）來獲得你的路徑的大小，然後相應地調整你的視框...

var box=path.getBBox() 
 
svg.setAttribute("viewBox",`${box.x} ${box.y} ${box.width} ${box.height}`) 
 

 
console.log(box)

svg{border:1px solid red}

<svg id="svg" height="20" width="20" viewBox="0 0 35 35"> 
 
\t <path id="path" fill="#6d6d6d" fill-rule="evenodd" d="M19.0625,8.75 C18.81,8.75 18.585,8.6475 18.415,8.4875 C18.41,8.4825 18.4025,8.4825 18.3975,8.4775 L16.0675,6.145 L10.1675,12.045 C9.5575,12.6525 8.5675,12.6525 7.9575,12.045 C7.3475,11.435 7.3475,10.445 7.9575,9.835 L13.855,3.9375 L11.5225,1.6025 C11.5175,1.5975 11.5175,1.59 11.5125,1.585 C11.3525,1.415 11.25,1.19 11.25,0.9375 C11.25,0.42 11.67,0 12.1875,0 L18.75,0 C19.44,0 20,0.56 20,1.25 L20,7.8125 C20,8.33 19.58,8.75 19.0625,8.75 Z M2.5,5.625 L2.5,16.875 C2.5,17.22 2.78,17.5 3.125,17.5 L14.375,17.5 C14.72,17.5 15,17.22 15,16.875 L15,10 L17.5,12.5 L17.5,17.5 C17.5,18.8825 16.3825,20 15,20 L2.5,20 C1.12,20 0,18.8825 0,17.5 L0,5 C0,3.62 1.12,2.5 2.5,2.5 L7.5,2.5 L10,5 L3.125,5 C2.78,5 2.5,5.28 2.5,5.625 Z"/> 
 
</svg>

P.S：只是這樣做一次，手動更改您的視框在你的代碼...

來源

2017-01-10 07:35:05

svg { 
 
    border: 1px solid red; 
 
} 
 
.svg--center{ 
 
    background: pink; 
 
    display: inline-block; 
 
    width: 100px; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="svg--center"> 
 
    <svg height="20" width="20" viewBox="0 0 20 20"> 
 
\t <path fill="#6d6d6d" fill-rule="evenodd" d="M19.0625,8.75 C18.81,8.75 18.585,8.6475 18.415,8.4875 C18.41,8.4825 18.4025,8.4825 18.3975,8.4775 L16.0675,6.145 L10.1675,12.045 C9.5575,12.6525 8.5675,12.6525 7.9575,12.045 C7.3475,11.435 7.3475,10.445 7.9575,9.835 L13.855,3.9375 L11.5225,1.6025 C11.5175,1.5975 11.5175,1.59 11.5125,1.585 C11.3525,1.415 11.25,1.19 11.25,0.9375 C11.25,0.42 11.67,0 12.1875,0 L18.75,0 C19.44,0 20,0.56 20,1.25 L20,7.8125 C20,8.33 19.58,8.75 19.0625,8.75 Z M2.5,5.625 L2.5,16.875 C2.5,17.22 2.78,17.5 3.125,17.5 L14.375,17.5 C14.72,17.5 15,17.22 15,16.875 L15,10 L17.5,12.5 L17.5,17.5 C17.5,18.8825 16.3825,20 15,20 L2.5,20 C1.12,20 0,18.8825 0,17.5 L0,5 C0,3.62 1.12,2.5 2.5,2.5 L7.5,2.5 L10,5 L3.125,5 C2.78,5 2.5,5.28 2.5,5.625 Z"/> 
 
    </svg></div>

來源

2018-01-24 20:43:16 sandraqu

在SVG中心對齊對象

回答

相關問題