时间戳

首页 > 解决方案 > 菜单中的 SVG 被错误地切断/裁剪

svg - 菜单中的 SVG 被错误地切断/裁剪

问题描述

在花费数小时研究类似问题后，我仍然没有找到可行的解决方案。我有一些正常渲染的 SVG，但是当它们被放置在<nav>零件中时，它们会被切断。我注意到这个问题似乎只有在导航中使用多个 SVG 图标时才会出现。因此，例如，如果我<li>完全删除了第一项，其余的 SVG 似乎没有被切断的问题。

我在这里使用以下相同的代码设置了一个codepen：https ://codepen.io/lsg-alex/pen/oNgVLbq

<nav id="site-navigation" class="main-navigation">
      <div class="menu-main-container">
        <ul id="menu-main">
          <li>
            <a href="#"
              ><!--?xml version="1.0" encoding="UTF-8"?-->
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 0 12.1 18.1"
                width="12.1"
                height="18.1"
              >
                <defs>
                  <style>
                    .cls-1,
                    .cls-4 {
                      fill: none;
                    }
                    .cls-2 {
                      clip-path: url(#clip-path);
                    }
                    .cls-3 {
                      fill: #58585b;
                    }
                    .cls-4 {
                      stroke: #58585b;
                      stroke-linecap: square;
                      stroke-linejoin: round;
                      stroke-width: 0.5px;
                    }
                  </style>
                  <clipPath id="clip-path">
                    <rect class="cls-1" width="12.1" height="18.1"></rect>
                  </clipPath>
                </defs>
                <title>icon-archive</title>
                <g id="Layer_2" data-name="Layer 2">
                  <g id="Layer_1-2" data-name="Layer 1">
                    <g class="cls-2">
                      <path
                        class="cls-3"
                        d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
                      ></path>
                      <path
                        class="cls-4"
                        d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
                      ></path>
                    </g>
                  </g>
                </g>
              </svg>
              <span class="menu-item__text">Archive</span></a
            >
          </li>
          <li>
            <a href="#"
              ><!--?xml version="1.0" encoding="UTF-8"?-->
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 0 16.24 17.78"
                width="16.24"
                height="17.78"
              >
                <defs>
                  <style>
                    .cls-1 {
                      fill: none;
                    }
                    .cls-2 {
                      clip-path: url(#clip-path);
                    }
                    .cls-3 {
                      fill: #58585b;
                    }
                  </style>
                  <clipPath id="clip-path">
                    <rect class="cls-1" width="16.24" height="17.78"></rect>
                  </clipPath>
                </defs>
                <title>icon-topics</title>
                <g id="Layer_2" data-name="Layer 2">
                  <g id="Layer_1-2" data-name="Layer 1">
                    <g class="cls-2">
                      <path
                        class="cls-3"
                        d="M5.24,10.35,6.23,8a.42.42,0,0,1,.39-.26h3.72a.44.44,0,0,1,.43.43.36.36,0,0,1-.06.2l-1,2.36a.42.42,0,0,1-.39.26H5.61a.44.44,0,0,1-.43-.43.36.36,0,0,1,.06-.2M8,.56,5.63,6.23a.43.43,0,0,1-.39.26H.61a.62.62,0,0,0,0,1.23H4.36a.43.43,0,0,1,.42.43.35.35,0,0,1,0,.2l-1,2.36a.42.42,0,0,1-.4.26H.61a.62.62,0,0,0,0,1.23H2.46a.43.43,0,0,1,.43.43.46.46,0,0,1-.05.2L1.11,16.93a.62.62,0,0,0,1.14.48l2.09-4.94a.42.42,0,0,1,.39-.26H8.44a.43.43,0,0,1,.43.43.46.46,0,0,1,0,.2L7.16,16.77a.62.62,0,0,0,1.15.46l2-4.76a.42.42,0,0,1,.39-.26h4.92a.6.6,0,0,0,.43-.18.61.61,0,0,0-.43-1h-4a.43.43,0,0,1-.42-.43.35.35,0,0,1,.05-.2l1-2.36a.42.42,0,0,1,.4-.26h3a.62.62,0,0,0,0-1.23H13.49a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2l2.11-5A.62.62,0,0,0,14.08.38L11.61,6.23a.42.42,0,0,1-.39.26H7.51a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2L9.18,1A.62.62,0,0,0,8,.56"
                      ></path>
                    </g>
                  </g>
                </g>
              </svg>
              <span class="menu-item__text">Topics</span></a
            >
          </li>
          <li>
            <a href="#"
              ><!--?xml version="1.0" encoding="UTF-8"?-->
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 0 16.72 16.14"
                width="16.72"
                height="16.14"
              >
                <defs>
                  <style>
                    .cls-1 {
                      fill: none;
                    }
                    .cls-2 {
                      clip-path: url(#clip-path);
                    }
                    .cls-3 {
                      fill: #58585b;
                    }
                  </style>
                  <clipPath id="clip-path" transform="translate(0 0)">
                    <rect class="cls-1" width="16.72" height="16.14"></rect>
                  </clipPath>
                </defs>
                <title>icon-search</title>
                <g id="Layer_2" data-name="Layer 2">
                  <g id="Layer_1-2" data-name="Layer 1">
                    <g class="cls-2">
                      <path
                        class="cls-3"
                        d="M9.84,11c-2.75-.13-4.75-2.1-4.65-4.57A4.6,4.6,0,0,1,10,2.06a4.58,4.58,0,0,1,4.52,4.63A4.57,4.57,0,0,1,9.84,11m-5.55-.57c-.86.81-3,3-3.86,3.81a1,1,0,0,0-.15,1.5,1.07,1.07,0,0,0,1.6,0c.87-.82,3.05-3.08,3.89-3.89,4.1,2.38,7.81,1,9.71-1.56a6.37,6.37,0,0,0-.8-8.44,7,7,0,0,0-9.06-.47,6.43,6.43,0,0,0-1.33,9"
                        transform="translate(0 0)"
                      ></path>
                    </g>
                  </g>
                </g>
              </svg>
              <span class="menu-item__text">Search</span></a
            >
          </li>
        </ul>
        
      </div>
    </nav>

我尝试调整 viewBox 设置、SVG 本身的高度/宽度以及通过 CSS、将溢出设置为可见、在标签内使用 .svg 等，但这些似乎都没有任何影响。例如，当我拉出一个在导航之外被切断的 SVG 并将代码粘贴到它上面时，它会正确呈现。

我不禁觉得我在这里忽略了一些明显的东西，任何帮助都将不胜感激。

标签： svg

解决方案

这条线是你的罪魁祸首，删除它们（或者至少是第一个，因为它是影响它下面的那个），瞧；

<clipPath id="clip-path">
    <rect class="cls-1" width="12.1" height="18.1"></rect>
</clipPath>

然后为了保持干净，请删除 CSS 中对它的引用，例如；

clip-path: url(#clip-path);

我将假设这些是由某些东西生成的，并且您并不打算无论如何都需要指定的剪辑路径。

干杯!

推荐阅读