当前位置： 文江博客话题详情

旋转的 svg 图标的边框和 svg 画布之间的空间

发布于 2025-01-12 23:02:18 字数 5759 浏览 4 评论 0原文

我正在使用 svg 创建一个基本的网络图标系统（一种精灵）。然而，在我的代码中，围绕一个图标（粉碎杂志图标和红色边框之间）有一些空间。我想知道如何才能将其删除。图标被旋转，并且使用 viewBox 我无法完成这项工作。也许我必须做出一些转变。我该怎么办？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Svg Icon System</title>
    <style>
      .icon {
        /* width: 3em;
        height: 3em; */
        fill: currentColor;
        stroke: black;
        stroke-width: 2px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <svg width="0" height="0">
      <defs>
        <g id="icon-linkedin">
          <path
            d="M80.667,14H19.315C16.381,14,14,16.325,14,19.188v61.617C14,83.672,16.381,86,19.315,86h61.352
        C83.603,86,86,83.672,86,80.805V19.188C86,16.325,83.603,14,80.667,14z M35.354,75.354H24.67V40.995h10.684V75.354z M30.012,36.297
        c-3.423,0-6.19-2.774-6.19-6.194c0-3.415,2.767-6.189,6.19-6.189c3.415,0,6.189,2.774,6.189,6.189
        C36.201,33.523,33.427,36.297,30.012,36.297z M75.35,75.354H64.683V58.646c0-3.986-0.078-9.111-5.551-9.111
        c-5.558,0-6.405,4.341-6.405,8.822v16.998H42.052V40.995h10.245v4.692h0.146c1.426-2.7,4.91-5.549,10.106-5.549
        c10.806,0,12.802,7.114,12.802,16.369V75.354z"
          />
        </g>

        <g id="icon-smash-mag">
          <path
            fill="#231F20"
            d="M45.718,55.325c-3.727-1.408-7.229-3.226-10.202-5.401c-0.077-0.056-0.157-0.111-0.233-0.168
        c-0.433-0.322-0.851-0.654-1.259-0.991c-0.107-0.088-0.211-0.178-0.316-0.267c-0.353-0.301-0.697-0.606-1.03-0.919
        c-0.062-0.058-0.127-0.115-0.188-0.173c-0.373-0.357-0.73-0.724-1.074-1.096c-0.091-0.098-0.179-0.197-0.268-0.296
        c-0.305-0.34-0.598-0.685-0.877-1.037c-0.041-0.052-0.085-0.102-0.125-0.154c-0.306-0.393-0.591-0.796-0.862-1.204
        c-0.07-0.104-0.137-0.21-0.204-0.315c-0.246-0.385-0.479-0.774-0.693-1.171c-0.021-0.039-0.045-0.077-0.066-0.117
        c-0.227-0.429-0.428-0.867-0.615-1.309c-0.047-0.11-0.091-0.221-0.135-0.333c-0.172-0.434-0.331-0.872-0.463-1.318
        c-0.006-0.02-0.014-0.04-0.02-0.06c-0.135-0.463-0.241-0.934-0.331-1.41c-0.022-0.117-0.043-0.234-0.062-0.352
        c-0.08-0.482-0.144-0.968-0.176-1.464c-0.042-0.665-0.055-1.318-0.047-1.963c0.002-0.199,0.018-0.392,0.025-0.589
        c0.016-0.447,0.039-0.892,0.081-1.329c0.021-0.219,0.051-0.435,0.078-0.652c0.052-0.412,0.113-0.821,0.189-1.225
        c0.039-0.211,0.083-0.42,0.129-0.629c0.091-0.413,0.198-0.82,0.315-1.224c0.053-0.183,0.104-0.366,0.163-0.547
        c0.148-0.454,0.316-0.9,0.499-1.341c0.049-0.12,0.092-0.242,0.144-0.361c0.77-1.752,1.821-3.401,3.185-4.943L16.21,24.575
        c-3.027,0.724-4.895,3.765-4.171,6.793l12.535,52.421c0.725,3.027,3.766,4.896,6.793,4.171l6.451-1.543
        c-2.504-0.829-6.833-2.409-10.982-4.623l6.015-13.644c0,0,7.079,6.304,17.242,6.304C60.258,74.454,64.775,62.524,45.718,55.325z"
          />
          <path
            fill="#231F20"
            d="M87.961,68.632L75.425,16.211c-0.723-3.028-3.765-4.895-6.793-4.171l-10.797,2.581
        c0.86,0.136,1.984,0.346,3.307,0.667c0.313,0.076,0.641,0.16,0.975,0.249c0.117,0.031,0.237,0.064,0.357,0.097
        c0.241,0.066,0.488,0.136,0.738,0.209c0.131,0.038,0.261,0.075,0.394,0.115c0.353,0.106,0.714,0.218,1.083,0.339
        c0.116,0.038,0.237,0.081,0.355,0.12c0.276,0.093,0.556,0.189,0.84,0.29c0.159,0.057,0.319,0.115,0.481,0.174
        c0.285,0.105,0.575,0.215,0.867,0.329c0.133,0.052,0.263,0.1,0.397,0.154c0.406,0.162,0.818,0.335,1.235,0.515
        c0.141,0.061,0.285,0.127,0.428,0.19c0.314,0.14,0.63,0.284,0.949,0.434c0.147,0.069,0.294,0.138,0.441,0.21
        c0.452,0.219,0.906,0.444,1.365,0.685l-4.702,13.03c0,0-3.913-4.371-14.405-4.903c-9.974-0.504-15.522,10.285,3.931,16.647
        c0.573,0.188,1.127,0.384,1.67,0.585c0.15,0.055,0.298,0.112,0.446,0.169c0.42,0.16,0.832,0.324,1.234,0.492
        c0.123,0.051,0.248,0.101,0.369,0.153c0.508,0.218,1.004,0.441,1.484,0.671c0.062,0.029,0.12,0.06,0.181,0.09
        c0.418,0.203,0.824,0.411,1.221,0.622c0.119,0.063,0.236,0.127,0.353,0.191c0.379,0.208,0.75,0.42,1.109,0.636
        c0.064,0.038,0.131,0.076,0.194,0.115c0.424,0.259,0.833,0.523,1.229,0.792c0.069,0.047,0.134,0.094,0.202,0.141
        c0.327,0.226,0.645,0.456,0.953,0.689c0.084,0.064,0.169,0.127,0.252,0.192c0.357,0.276,0.706,0.556,1.038,0.841c0,0,0,0,0,0
        c5.631,4.835,7.638,10.851,7.476,16.562c-0.128,4.513-1.707,8.184-3.538,10.953l11.048-2.641
        C86.817,74.702,88.684,71.659,87.961,68.632z"
          />
        </g>
      </defs>
    </svg>

    <!-- viewBox="0 0 100 100" -->
    <!-- prettier-ignore -->
    <svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
      <title>Icona di Linkedin</title>
      <use xlink:href="#icon-linkedin"></use>
    </svg>
    <!-- prettier-ignore -->
    <svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
      <title>Icona di Smah Magazine</title>
      <use xlink:href="#icon-smash-mag"></use>
    </svg>

    <!-- <button style="color:green">
    <svg class="icon" width="50" height="50" viewBox="0 0 100 100" style="border: 1px solid red">
      <title>Icona di Linkedin</title>
      <use xlink:href="#icon-linkedin"></use>
    </svg>
    </button> -->
  </body>
</html>

原文

I'm creating a rudimental web icon system (a kind of sprite) with svg. However in my code around one icon (between the smash magazine icon and the red border) there is some room. I would know how it is possible to remove it. The icon is rotated and with the viewBox I'm not able to do the job. May be I have to make some transformation. How could I do?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Svg Icon System</title>
    <style>
      .icon {
        /* width: 3em;
        height: 3em; */
        fill: currentColor;
        stroke: black;
        stroke-width: 2px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <svg width="0" height="0">
      <defs>
        <g id="icon-linkedin">
          <path
            d="M80.667,14H19.315C16.381,14,14,16.325,14,19.188v61.617C14,83.672,16.381,86,19.315,86h61.352
        C83.603,86,86,83.672,86,80.805V19.188C86,16.325,83.603,14,80.667,14z M35.354,75.354H24.67V40.995h10.684V75.354z M30.012,36.297
        c-3.423,0-6.19-2.774-6.19-6.194c0-3.415,2.767-6.189,6.19-6.189c3.415,0,6.189,2.774,6.189,6.189
        C36.201,33.523,33.427,36.297,30.012,36.297z M75.35,75.354H64.683V58.646c0-3.986-0.078-9.111-5.551-9.111
        c-5.558,0-6.405,4.341-6.405,8.822v16.998H42.052V40.995h10.245v4.692h0.146c1.426-2.7,4.91-5.549,10.106-5.549
        c10.806,0,12.802,7.114,12.802,16.369V75.354z"
          />
        </g>

        <g id="icon-smash-mag">
          <path
            fill="#231F20"
            d="M45.718,55.325c-3.727-1.408-7.229-3.226-10.202-5.401c-0.077-0.056-0.157-0.111-0.233-0.168
        c-0.433-0.322-0.851-0.654-1.259-0.991c-0.107-0.088-0.211-0.178-0.316-0.267c-0.353-0.301-0.697-0.606-1.03-0.919
        c-0.062-0.058-0.127-0.115-0.188-0.173c-0.373-0.357-0.73-0.724-1.074-1.096c-0.091-0.098-0.179-0.197-0.268-0.296
        c-0.305-0.34-0.598-0.685-0.877-1.037c-0.041-0.052-0.085-0.102-0.125-0.154c-0.306-0.393-0.591-0.796-0.862-1.204
        c-0.07-0.104-0.137-0.21-0.204-0.315c-0.246-0.385-0.479-0.774-0.693-1.171c-0.021-0.039-0.045-0.077-0.066-0.117
        c-0.227-0.429-0.428-0.867-0.615-1.309c-0.047-0.11-0.091-0.221-0.135-0.333c-0.172-0.434-0.331-0.872-0.463-1.318
        c-0.006-0.02-0.014-0.04-0.02-0.06c-0.135-0.463-0.241-0.934-0.331-1.41c-0.022-0.117-0.043-0.234-0.062-0.352
        c-0.08-0.482-0.144-0.968-0.176-1.464c-0.042-0.665-0.055-1.318-0.047-1.963c0.002-0.199,0.018-0.392,0.025-0.589
        c0.016-0.447,0.039-0.892,0.081-1.329c0.021-0.219,0.051-0.435,0.078-0.652c0.052-0.412,0.113-0.821,0.189-1.225
        c0.039-0.211,0.083-0.42,0.129-0.629c0.091-0.413,0.198-0.82,0.315-1.224c0.053-0.183,0.104-0.366,0.163-0.547
        c0.148-0.454,0.316-0.9,0.499-1.341c0.049-0.12,0.092-0.242,0.144-0.361c0.77-1.752,1.821-3.401,3.185-4.943L16.21,24.575
        c-3.027,0.724-4.895,3.765-4.171,6.793l12.535,52.421c0.725,3.027,3.766,4.896,6.793,4.171l6.451-1.543
        c-2.504-0.829-6.833-2.409-10.982-4.623l6.015-13.644c0,0,7.079,6.304,17.242,6.304C60.258,74.454,64.775,62.524,45.718,55.325z"
          />
          <path
            fill="#231F20"
            d="M87.961,68.632L75.425,16.211c-0.723-3.028-3.765-4.895-6.793-4.171l-10.797,2.581
        c0.86,0.136,1.984,0.346,3.307,0.667c0.313,0.076,0.641,0.16,0.975,0.249c0.117,0.031,0.237,0.064,0.357,0.097
        c0.241,0.066,0.488,0.136,0.738,0.209c0.131,0.038,0.261,0.075,0.394,0.115c0.353,0.106,0.714,0.218,1.083,0.339
        c0.116,0.038,0.237,0.081,0.355,0.12c0.276,0.093,0.556,0.189,0.84,0.29c0.159,0.057,0.319,0.115,0.481,0.174
        c0.285,0.105,0.575,0.215,0.867,0.329c0.133,0.052,0.263,0.1,0.397,0.154c0.406,0.162,0.818,0.335,1.235,0.515
        c0.141,0.061,0.285,0.127,0.428,0.19c0.314,0.14,0.63,0.284,0.949,0.434c0.147,0.069,0.294,0.138,0.441,0.21
        c0.452,0.219,0.906,0.444,1.365,0.685l-4.702,13.03c0,0-3.913-4.371-14.405-4.903c-9.974-0.504-15.522,10.285,3.931,16.647
        c0.573,0.188,1.127,0.384,1.67,0.585c0.15,0.055,0.298,0.112,0.446,0.169c0.42,0.16,0.832,0.324,1.234,0.492
        c0.123,0.051,0.248,0.101,0.369,0.153c0.508,0.218,1.004,0.441,1.484,0.671c0.062,0.029,0.12,0.06,0.181,0.09
        c0.418,0.203,0.824,0.411,1.221,0.622c0.119,0.063,0.236,0.127,0.353,0.191c0.379,0.208,0.75,0.42,1.109,0.636
        c0.064,0.038,0.131,0.076,0.194,0.115c0.424,0.259,0.833,0.523,1.229,0.792c0.069,0.047,0.134,0.094,0.202,0.141
        c0.327,0.226,0.645,0.456,0.953,0.689c0.084,0.064,0.169,0.127,0.252,0.192c0.357,0.276,0.706,0.556,1.038,0.841c0,0,0,0,0,0
        c5.631,4.835,7.638,10.851,7.476,16.562c-0.128,4.513-1.707,8.184-3.538,10.953l11.048-2.641
        C86.817,74.702,88.684,71.659,87.961,68.632z"
          />
        </g>
      </defs>
    </svg>

    <!-- viewBox="0 0 100 100" -->
    <!-- prettier-ignore -->
    <svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
      <title>Icona di Linkedin</title>
      <use xlink:href="#icon-linkedin"></use>
    </svg>
    <!-- prettier-ignore -->
    <svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
      <title>Icona di Smah Magazine</title>
      <use xlink:href="#icon-smash-mag"></use>
    </svg>

    <!-- <button style="color:green">
    <svg class="icon" width="50" height="50" viewBox="0 0 100 100" style="border: 1px solid red">
      <title>Icona di Linkedin</title>
      <use xlink:href="#icon-linkedin"></use>
    </svg>
    </button> -->
  </body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

滥情空心 2025-01-19 23:02:18

您的 SVG 具有默认显示：内联，并且它们之间有一个空格，浏览器将其呈现为就像两个单词之间的空格一样。
快速而肮脏的解决方案是删除所有空格，包括换行符。
但更好的方法是使用 Flexbox 将 SVG 转换为 Flex 元素。

Your SVG's have default display:inline and there's a whitespace between them, which is rendered by browser like it was a whitespace between two words.
Quick and dirty solution is to remove the whitespaces - all of them, including line breaks.
But the better one is to use flexbox to turn your SVG's to flex elements.

回复 原文
~没有更多了~

关于作者

临风闻羌笛

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文