如何将 svg 背景图像居中？

【问题标题】：How to center svg background-image?如何将 svg 背景图像居中？
【发布时间】：2019-08-28 11:16:04
【问题描述】：

我正在尝试将 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>

【问题讨论】：

    标签： html css svg


    【解决方案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>

    【讨论】：

    • 您是如何在上一个示例中找到正确的视图框的？你是靠肉眼做的还是有工具可以做到的？
    • SVGGraphicsElement 接口有一个 getBBox() 方法。例如，请参阅this QA。我使用了这个，然后是基本算术 (graphic-width / 2) - (viewport-width / 2)。
    【解决方案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;）

    【讨论】：

      猜你喜欢
      • 2016-01-23
      • 2020-01-22
      • 1970-01-01
      • 2014-01-28
      • 2021-07-29
      • 2011-06-29
      • 1970-01-01
      • 1970-01-01
      • 2017-10-06
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode