如何居中SVG背景图像？

Question

我正在尝试将svg放在div的中央，该怎么做？

 div{ width: 50px; height: 70px; background-size: 50px 70px; background-position: center; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMinYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

Answer 1

您需要修复<svg>的viewBox 。

将其设置为0 0 117 95将使您的路径占据整个视口

 div{ width: 50px; height: 70px; background-size: 50px 70px; background-position: center; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117 95' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

您现在可以通过CSS更好地控制其大小：

 div{ width: 50px; height: 70px; background-size: 35px 50px; background-position: center; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117 95' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

但是当然，您也可以直接将其设置为仅将其居中的值，例如-41.5 -52.5 200 200将

 div{ width: 50px; height: 70px; background-size: 50px 70px; background-position: center; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-41.5 -52.5 200 200' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMinYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

Answer 2

像这样更改背景位置：

 div{ width: 50px; height: 70px; background-size: 50px 70px; background-position: 10px 13px; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMinYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

问题在于，SVG不仅是您要居中的图像，而且还包含周围的一些透明部分。 我将重新制作SVG并清除所有透明部分，以便SVG仅包含您想要的形状。 居中会更容易（只需使用background-position: center center; ）