Question

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

＆＃13;

svg{
  border:1px solid red;
}

＆＃13;

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

＆＃13;

Answer 1

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

更好的方法是使用正确的边界框导出文件，使其完全居中对齐。打开你的svg（在草图中）在它周围添加了一个35 x 35px的隐形框，它导出到整个东西并清理它：

＆＃13;

svg {
  border: 1px solid red;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

svg{border:1px solid red}

＆＃13;

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

＆＃13;

P.S。：只需执行一次，然后在代码中手动更改viewBox ...

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

对齐SVG中心中的对象

3 个答案: