在 SVG 中心对齐对象

Question

如何在 svg 标签中心对齐对象。我可以通过调整视图框中的 x，y cordiantes 来使其对齐。但是每次我需要根据对象的大小更改值。如何在SVG中实现对象对中，分别是任何大小的对象。为了更清楚起见，我希望图标在红色边框内水平和垂直居中。参考下面的代码

svg{
  border:1px solid red;
}

<svg height="20" width="20" viewBox="0 0 35 35">
	<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>

Answer 1

你可以使用 getBBox（） 来获取路径的大小，然后相应地调整你的 viewBox...

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">
	<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>

PS：只需执行此操作一次，然后在代码中手动更改视图框...

Answer 2

您可以移动min-x和min-y坐标以将内容放置在中心。可以在此处找到viewBox的说明：https://sarasoueidan.com/blog/svg-coordinate-systems/

更好的方法是使用正确的边界框导出文件，使其完全居中对齐。打开你的svg（在Sketch中）在它周围添加一个35 x 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>

Answer 3

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">
	<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>