在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中心对齐对象

回答

相关问题