文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何多次重用嵌套的SVG，对每个viewBox使用不同的viewBox？

问如何多次重用嵌套的SVG，对每个viewBox使用不同的viewBox？
EN

Stack Overflow用户
提问于 2022-10-19 17:59:27
回答 3查看 61关注 0票数 0

我的设计师给了我一个SVG，它看起来像这样：

​

​

我将把这作为一个响应按钮在网页上。随着视口的扩大，我希望这是一个非常特殊的水平扩展。这个SVG是250x44，BTW。

我的想法是把它切成碎片，然后把它们粘合在一起，就像这样：

​

​

然后，至少在理论上，我应该能够给每一件作品它自己的preserveAspectRatio，它定义了每一片应该如何扩展以填满它可用的空间。让第三块占据所有可用的房间。

不幸的是，我被困在“片成碎片”的部分。无论我如何尝试，我似乎无法得到的作品的viewBox有我正在寻找的效果。

这是我的SVG文件：

​

代码语言：javascript
复制
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 250 44">

    <!-- #default is in <defs>, defined at the bottom of the file. -->

  <symbol id="bg-1" viewBox="0 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-1" x="0" width="47" height="44" />
  <symbol id="bg-2" viewBox="48 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-2" x="48" width="36" height="44" />
  <symbol id="bg-3" viewBox="84 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-3" x="84" width="36" height="44" />
  <symbol id="bg-4" viewBox="120 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-4" x="120" width="29" height="44" />
  <symbol id="bg-5" viewBox="149 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-5" x="149" width="9" height="44" />
  <symbol id="bg-6" viewBox="158 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-6" x="158" width="39" height="44" />
  <symbol id="bg-7" viewBox="197 0 250 44">
    <use href="#default" />
  </symbol>
  <use href="#bg-7" x="197" width="53" height="44" />

  <defs>
    <!-- This is the file my designer gave to me -->
    <svg id="default">
      <defs>
        <style>
          .cls-1,
          .cls-8 {
            opacity: 0.6;
          }

          .cls-2 {
            fill: #25180c;
          }

          .cls-3 {
            fill: #fcf9eb;
          }

          .cls-4 {
            opacity: 0.02;
          }

          .cls-5 {
            fill: #956131;
          }

          .cls-6 {
            fill: none;
            stroke: #724141;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1px;
            stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
            opacity: 0.3;
          }

          .cls-7 {
            opacity: 0.5;
            fill: url(#linear-gradient);
          }

          .cls-8 {
            fill: url(#linear-gradient-2);
          }
        </style>
        <linearGradient id="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#956131" stop-opacity="0" />
          <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
        </linearGradient>
        <linearGradient id="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24"
          gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#956131" stop-opacity="0" />
          <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
        </linearGradient>
      </defs>
      <g id="Ingame_Secondary_Button" data-name="Ingame Secondary Button">
        <g id="ing2_outershadow" class="cls-1">
          <path class="cls-2"
            d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />
        </g>
        <path id="ing2_background" class="cls-3"
          d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
        <g id="ing2_pattern" class="cls-4">
          <path class="cls-5"
            d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
          <path class="cls-5"
            d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
          <path class="cls-5"
            d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
          <path class="cls-5"
            d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
          <path class="cls-5" d="M237.5,37.83h0Z" />
          <path class="cls-5"
            d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
          <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
          <path class="cls-5"
            d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
          <path class="cls-5"
            d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
          <path class="cls-5"
            d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
          <path class="cls-5" d="M245.68,15h0l0,0Z" />
          <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
        </g>
        <path id="ing2_innerborder" class="cls-6"
          d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
        <path id="ing2_gradient" class="cls-7"
          d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
        <path id="ing2_innershadow" class="cls-8"
          d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
        <g id="ing2_outerborder">
          <path class="cls-5"
            d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
        </g>
      </g>
    </svg>

  </defs>
</svg>

​

当我在Firefox中打开这个文件时，它呈现如下所示：

​

​

当我玩这个工具，我觉得我对viewBox有了正确的想法，但是无论我尝试了什么，我都无法让它呈现我想要的片段，在我想要的地方。

我尝试过使用嵌套的svgs、uses和symbols (后者在文件的当前迭代中显示)，但我从来没有觉得自己离解决方案越来越近。在这一点上，我没有想法，我认为只有一些东西，我不知道，这是阻止我做到这一点。但是，当我将我的示例与该工具的外观进行比较时，我觉得symbol.viewBox.x值没有得到尊重，我也不知道为什么。

为了总结我的问题，我如何修改这个SVG文件，使它呈现第二个图像中所示的片段？如果每个部件都有一个不稳定的纵横比，这是可以的；我计划在下一个步骤中修复它。现在，我只想让这个父svg并行地呈现这些片段。

viewbox
css
svg
EN

回答 3

Stack Overflow用户

发布于 2022-10-19 20:12:38

首先:与使用带有样式和渐变的svg元素不同，我更喜欢只使用形状，而不使用符号之外的另一个。

请注意，该符号有一个viewBox：<symbol id="default" viewBox="0 0 250 44">

在新符号中使用符号时，必须具有宽度和高度。

代码语言：javascript
复制
 <symbol id="bg-1" viewBox="0 0 250 44">
        <use href="#default" width="250" height="44" />
      </symbol>
      <use href="#bg-1" x="0" width="50" height="8.8" />

使用bg-1时，由于您想使用width="50"，所以高度必须尊重高宽比，因此height="8.8"

250/5 = 50；

44/5 = 8.8；

上面的代码用于未切割的符号。

当您需要只剪掉默认值的第一部分时，您可以更改bg-2符号的viewBox：

代码语言：javascript
复制
<symbol id="bg-2" viewBox="0 0 50 44">

这将给你的第一个50个用户单位总数为250。

对于接下来的50个用户单元，您将需要使用viewBox="50 0 50 44"，这意味着片段从x= 50开始，宽度为50。

接下来，您可以使用viewBox="100 0 50 44"，这意味着片段从x= 100开始，宽度为50。

等等..。

​

代码语言：javascript
复制
svg {
  border: solid;
}

.cls-1,
.cls-8 {
  opacity: 0.6;
}

.cls-2 {
  fill: #25180c;
}

.cls-3 {
  fill: #fcf9eb;
}

.cls-4 {
  opacity: 0.02;
}

.cls-5 {
  fill: #956131;
}

.cls-6 {
  fill: none;
  stroke: #724141;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
  opacity: 0.3;
}

.cls-7 {
  opacity: 0.5;
  fill: url(#linear-gradient);
}

.cls-8 {
  fill: url(#linear-gradient-2);
}
代码语言：javascript
复制
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 55 25">

  <!-- #default is in <defs>, defined at the bottom of the file. -->

  <symbol id="bg-1" viewBox="0 0 250 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-1" x="0" width="50" height="8.8" />

  <symbol id="bg-2" viewBox="0 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-2" x="0" y="12" width="10" height="8.8" />

  <symbol id="bg-3" viewBox="50 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-3" x="10" y="12" width="10" height="8.8" />

  <symbol id="bg-4" viewBox="100 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-4" x="20" y="12" width="10" height="8.8" />

  <symbol id="bg-5" viewBox="150 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-5" x="30" y="12" width="10" height="8.8" />

  <symbol id="bg-6" viewBox="200 0 50 44">
    <use href="#default" width="250" height="44" />
  </symbol>
  <use href="#bg-6" x="40" y="12" width="10" height="8.8" />

</svg>
<!-- This is the file my designer gave to me -->
<svg>
  <defs>
    <linearGradient id="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#956131" stop-opacity="0" />
      <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#956131" stop-opacity="0" />
      <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
    </linearGradient>
  </defs>
  <symbol id="default" viewBox="0 0 250 44">

    <path class="cls-2" d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />

    <path id="ing2_background" class="cls-3" d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
    <g id="ing2_pattern" class="cls-4">
      <path class="cls-5" d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
      <path class="cls-5" d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
      <path class="cls-5" d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
      <path class="cls-5" d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
      <path class="cls-5" d="M237.5,37.83h0Z" />
      <path class="cls-5" d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
      <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
      <path class="cls-5" d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
      <path class="cls-5" d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
      <path class="cls-5" d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
      <path class="cls-5" d="M245.68,15h0l0,0Z" />
      <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
    </g>
    <path id="ing2_innerborder" class="cls-6" d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
    <path id="ing2_gradient" class="cls-7" d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
    <path id="ing2_innershadow" class="cls-8" d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
    <g id="ing2_outerborder">
      <path class="cls-5" d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
    </g>
  </symbol>
</svg>

​

票数 0
EN

Stack Overflow用户

发布于 2022-10-19 20:31:04

我想把这个放在问题的末尾，但是源代码太大了，不适合。不过没关系，因为这是个答案，只是我不喜欢。

经过更多小时的反复试验，我找到了一个可行的解决方案。

​

代码语言：javascript
复制
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 250 44">

  <svg id="bg-1" viewBox="0 0 47 44" x="0" width="47">
    <defs>
      <style>
        .cls-1,
        .cls-8 {
          opacity: 0.6;
        }

        .cls-2 {
          fill: #25180c;
        }

        .cls-3 {
          fill: #fcf9eb;
        }

        .cls-4 {
          opacity: 0.02;
        }

        .cls-5 {
          fill: #956131;
        }

        .cls-6 {
          fill: none;
          stroke: #724141;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 1px;
          stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
          opacity: 0.3;
        }

        .cls-7 {
          opacity: 0.5;
          fill: url(.linear-gradient);
        }

        .cls-8 {
          fill: url(.linear-gradient-2);
        }
      </style>
      <linearGradient class="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
      </linearGradient>
      <linearGradient class="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24"
        gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
      </linearGradient>
    </defs>
    <g class="Ingame_Secondary_Button" data-name="Ingame Secondary Button">
      <g class="cls-1">
        <path class="cls-2"
          d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />
      </g>
      <path class="cls-3"
        d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
      <g class="cls-4">
        <path class="cls-5"
          d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
        <path class="cls-5"
          d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
        <path class="cls-5"
          d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
        <path class="cls-5"
          d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
        <path class="cls-5" d="M237.5,37.83h0Z" />
        <path class="cls-5"
          d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
        <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
        <path class="cls-5"
          d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
        <path class="cls-5"
          d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
        <path class="cls-5"
          d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
        <path class="cls-5" d="M245.68,15h0l0,0Z" />
        <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
      </g>
      <path class="cls-6"
        d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
      <path class="cls-7"
        d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
      <path class="cls-8"
        d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
      <g>
        <path class="cls-5"
          d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
      </g>
    </g>
  </svg>

  <!-- I'm commenting this out as further proof that it's working the way I want, but I wouldn't comment this out in the real website -->
  <!-- I'm removing the other nested svgs, otherwise my post is too large for SO to accept. -->
    
  <svg id="bg-7" viewBox="197 0 53 44" x="197" width="53">
    <defs>
      <style>
        .cls-1,
        .cls-8 {
          opacity: 0.6;
        }

        .cls-2 {
          fill: #25180c;
        }

        .cls-3 {
          fill: #fcf9eb;
        }

        .cls-4 {
          opacity: 0.02;
        }

        .cls-5 {
          fill: #956131;
        }

        .cls-6 {
          fill: none;
          stroke: #724141;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 1px;
          stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
          opacity: 0.3;
        }

        .cls-7 {
          opacity: 0.5;
          fill: url(.linear-gradient);
        }

        .cls-8 {
          fill: url(.linear-gradient-2);
        }
      </style>
      <linearGradient class="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
      </linearGradient>
      <linearGradient class="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24"
        gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
      </linearGradient>
    </defs>
    <g class="Ingame_Secondary_Button" data-name="Ingame Secondary Button">
      <g class="cls-1">
        <path class="cls-2"
          d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />
      </g>
      <path class="cls-3"
        d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
      <g class="cls-4">
        <path class="cls-5"
          d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
        <path class="cls-5"
          d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
        <path class="cls-5"
          d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
        <path class="cls-5"
          d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
        <path class="cls-5" d="M237.5,37.83h0Z" />
        <path class="cls-5"
          d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
        <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
        <path class="cls-5"
          d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
        <path class="cls-5"
          d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
        <path class="cls-5"
          d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
        <path class="cls-5" d="M245.68,15h0l0,0Z" />
        <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
      </g>
      <path class="cls-6"
        d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
      <path class="cls-7"
        d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
      <path class="cls-8"
        d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
      <g>
        <path class="cls-5"
          d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
      </g>
    </g>
  </svg>
</svg>

​

但我讨厌它是因为：

  1. 我不得不大量修改我的设计师给我的SVG。例如，我将所有的id转换为classes。(也许这是完全没有必要的，但我是在向墙上扔飞镖，同时想出如何让它恢复到目前的状态。)
  2. 如果他们想改变按钮的外观，我必须把所有这些修改再乘以碎片的数量。
  3. 我不明白为什么它起作用，而我的第一个例子没有。
  4. 与我不工作的版本相比，这个文件很大。

有什么方法只在我的代码中只使用一次设计人员的SVG而只进行最少的修改吗？

票数 0
EN

Stack Overflow用户

发布于 2022-10-20 00:02:22

经过更多的尝试和错误，我已经找到了一个解决方案，不需要复制和粘贴我的设计师的SVG代码的每一个部分。我真的不明白为什么当前的代码可以工作，而我所有的其他尝试都失败了，但这是另一个帖子的问题(我计划在创建它之后链接到它)。

以下是工作代码：

​

代码语言：javascript
复制
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 250 44">

  <!-- #Ingame_Secondary_Button is defined at the bottom of the file. -->

  <symbol id="bg-1" viewBox="0 0 47 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-1" x="0" width="47" />

  <symbol id="bg-2" viewBox="48 0 36 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-2" x="47" width="37" />

  <!-- I'm commenting this out as evidence that these are pieces of the SVG (as opposed to the whole SVG overlapping itself x times) -->
  <!-- 
  <symbol id="bg-3" viewBox="84 0 36 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-3" x="84" width="36" />
  -->

  <symbol id="bg-4" viewBox="120 0 29 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-4" x="120" width="29" />

  <symbol id="bg-5" viewBox="149 0 9 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-5" x="149" width="9" />

  <symbol id="bg-6" viewBox="158 0 39 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-6" x="158" width="39" />

  <symbol id="bg-7" viewBox="197 0 53 44">
    <use href="#Ingame_Secondary_Button"/>
  </symbol>
  <use href="#bg-7" x="197" width="53" />


  <!-- This is the file my designer gave to me -->

  <symbol id="default">
    <defs>
      <style>
        .cls-1,
        .cls-8 {
          opacity: 0.6;
        }

        .cls-2 {
          fill: #25180c;
        }

        .cls-3 {
          fill: #fcf9eb;
        }

        .cls-4 {
          opacity: 0.02;
        }

        .cls-5 {
          fill: #956131;
        }

        .cls-6 {
          fill: none;
          stroke: #724141;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 1px;
          stroke-dasharray: 69.96 2.5 1 2.5 1 2.5;
          opacity: 0.3;
        }

        .cls-7 {
          opacity: 0.5;
          fill: url(#linear-gradient);
        }

        .cls-8 {
          fill: url(#linear-gradient-2);
        }
      </style>
      <linearGradient id="linear-gradient" x1="125.64" y1="27.26" x2="125.64" y2="2" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.2" />
      </linearGradient>
      <linearGradient id="linear-gradient-2" x1="111.9" y1="50.47" x2="115.6" y2="8.24" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#956131" stop-opacity="0" />
        <stop offset="1" stop-color="#956131" stop-opacity="0.15" />
      </linearGradient>
    </defs>
    <g id="Ingame_Secondary_Button" data-name="Ingame Secondary Button">
      <g id="ing2_outershadow" class="cls-1">
        <path class="cls-2"
          d="M234.3,3.16H26.36a2.55,2.55,0,0,0-2.24,1.32,4.75,4.75,0,0,1-.61.94,1.37,1.37,0,0,1-1.28.38,1.88,1.88,0,0,1-.65-.39L19.78,4a3.83,3.83,0,0,0-2.38-.83H1.91A1.89,1.89,0,0,0,0,5V40.29A3.76,3.76,0,0,0,3.81,44H148.72a4,4,0,0,0,1.14-.17l1.61-.47a8,8,0,0,1,3.32-.39,2.73,2.73,0,0,1,1,.4,4.1,4.1,0,0,0,2.12.63h76.39a1.56,1.56,0,0,0,1.07-.43c7.19-7,11.58-13.24,14.48-19.09a1.93,1.93,0,0,0,0-1.78c-5.16-9.34-9.92-15.22-14.46-19.17A1.51,1.51,0,0,0,234.3,3.16Z" />
      </g>
      <path id="ing2_background" class="cls-3"
        d="M3.81,41H148.72a2.72,2.72,0,0,0,.84-.13c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h76.39a.58.58,0,0,0,.37-.15,72.13,72.13,0,0,0,14.29-19.36,1.08,1.08,0,0,0,0-.93c-4.65-8.66-9.31-15-14.25-19.44A.46.46,0,0,0,234.3,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41Z" />
      <g id="ing2_pattern" class="cls-4">
        <path class="cls-5"
          d="M61.11,5.25H50.84L49,6.33a221.18,221.18,0,0,1-20,10A139.08,139.08,0,0,1,5.24,24.21v6.44A182.55,182.55,0,0,0,31,20.92C41.33,16.15,51.19,10.54,61.11,5.25Z" />
        <path class="cls-5"
          d="M29.81,5.25H28.12a.47.47,0,0,0-.38.19,6.06,6.06,0,0,1-.59.66,6.59,6.59,0,0,1-6.44,1.64,7.15,7.15,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11H10.15c-1.63.43-3.26.83-4.91,1.18v8.46l1.67-.43A105.92,105.92,0,0,0,29.81,5.25Z" />
        <path class="cls-5"
          d="M75.9,20.29c9.42-5.44,19-10.41,29.31-13.25a78.43,78.43,0,0,1,8.15-1.79H94.79A183.6,183.6,0,0,0,73,15L58.4,22.48c-4.88,2.41-9.75,4.77-14.72,6.86-2.48,1-5,2.05-7.48,3-1.25.48-2.52.9-3.79,1.34s-2.53.87-3.8,1.26c-2,.64-4,1.25-6.08,1.82H47.19C57.08,31.58,66.48,25.75,75.9,20.29Z" />
        <path class="cls-5"
          d="M200,27.22A319.47,319.47,0,0,0,169.61,9.79a92.1,92.1,0,0,0-10.5-4.54h-17.4a78.67,78.67,0,0,1,25.51,9.09,215.09,215.09,0,0,1,28.41,18.88c1.46,1.18,3,2.36,4.44,3.53h16L213.8,35.6C209.13,33,204.52,30.2,200,27.22Z" />
        <path class="cls-5" d="M237.5,37.83h0Z" />
        <path class="cls-5"
          d="M213.8,16.09c-2.56-1.86-5-3.79-7.7-5.55l-3.95-2.67c-1.31-.9-2.72-1.68-4.09-2.51l-.18-.11H181.13C190.34,10,201,15.76,209.49,21.94c2.51,1.8,5,3.71,7.49,5.55L224.59,33c1.79,1.23,3.54,2.49,5.33,3.72h2.55a.52.52,0,0,0,.37-.16q1.74-1.8,3.28-3.6-3.75-2.7-7.46-5.49C223.76,23.7,218.85,19.86,213.8,16.09Z" />
        <polygon class="cls-5" points="239.58 35.47 239.58 35.47 239.58 35.47 239.58 35.47" />
        <path class="cls-5"
          d="M146.35,16.24a52.33,52.33,0,0,0-12.56-2.95,65.68,65.68,0,0,0-12.78.19,63,63,0,0,0-12.44,2.76,70.65,70.65,0,0,0-11.64,5.12A130.2,130.2,0,0,0,76.47,35.9l-1,.85h9.3A88.7,88.7,0,0,1,99.37,25.64a54,54,0,0,1,22.15-7.57,52.77,52.77,0,0,1,11.72,0,42.13,42.13,0,0,1,11.15,3.13A72.43,72.43,0,0,1,164,34.33c.88.79,1.73,1.61,2.58,2.42h12.75c-3.48-2.82-7-5.6-10.7-8.23C161.74,23.65,154.43,19.17,146.35,16.24Z" />
        <path class="cls-5"
          d="M134.55,27.28a24.77,24.77,0,0,0-4.05-1.15,18.43,18.43,0,0,0-2.11-.27c-.7-.05-1.36-.06-2-.05a29.3,29.3,0,0,0-4.06.36,27.67,27.67,0,0,0-7.68,2.56A38.94,38.94,0,0,0,108,33.09c-1.43,1.17-2.79,2.4-4.1,3.66h7.36a22.78,22.78,0,0,1,11.79-6,16.65,16.65,0,0,1,3.31-.22c.55,0,1.13.05,1.65.11a11.72,11.72,0,0,1,1.55.28,17,17,0,0,1,5.86,2.74,32.48,32.48,0,0,1,3.68,3.1h9.3a54.16,54.16,0,0,0-10.13-7.69A28.5,28.5,0,0,0,134.55,27.28Z" />
        <path class="cls-5"
          d="M220.07,5.25c6.46,4.74,13,9.45,19.85,13.79,1.37.87,2.76,1.73,4.15,2.57l.14-.25a.5.5,0,0,0,0-.49,81.5,81.5,0,0,0-6.94-10.66q-4.09-2.43-8.16-5Z" />
        <path class="cls-5" d="M245.68,15h0l0,0Z" />
        <path class="cls-5" d="M239.58,35.47c-.67.79-1.36,1.57-2.08,2.36C238.22,37,238.91,36.26,239.58,35.47Z" />
      </g>
      <path id="ing2_innerborder" class="cls-6"
        d="M232.63,5.25H28.12a.51.51,0,0,0-.39.19,5.08,5.08,0,0,1-.58.66,6.59,6.59,0,0,1-6.44,1.64,7.25,7.25,0,0,1-2.44-1.35L17,5.36a.49.49,0,0,0-.31-.11h-11a.5.5,0,0,0-.5.5v30.5a.5.5,0,0,0,.5.5H148.42l.15,0,1.51-.45a12.63,12.63,0,0,1,5.57-.52,7.44,7.44,0,0,1,2.52.93.48.48,0,0,0,.24.06h74.06a.52.52,0,0,0,.37-.16,67.69,67.69,0,0,0,11.37-15.23.5.5,0,0,0,0-.49C240.49,14.2,236.8,9.11,233,5.39A.5.5,0,0,0,232.63,5.25Z" />
      <path id="ing2_gradient" class="cls-7"
        d="M246.94,27.26q1.44-2.37,2.6-4.77a1,1,0,0,0,0-.92c-4.65-8.67-9.31-15-14.24-19.45a.48.48,0,0,0-.33-.12H27a1.55,1.55,0,0,0-1.35.82A4.64,4.64,0,0,1,24.84,4a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58L19.78,2.62A2.77,2.77,0,0,0,18,2H2.54a.9.9,0,0,0-.9.91V27.26Z" />
      <path id="ing2_innershadow" class="cls-8"
        d="M149.56,40.87c.6-.19,1.18-.36,1.64-.49a10.87,10.87,0,0,1,2.87-.5A5.42,5.42,0,0,1,155,40a3.55,3.55,0,0,1,1.32.56,3,3,0,0,0,1.58.49h70c-13.72-5.86-30.11-15.3-30.11-15.3l-78-7.51-34.86-.13S61.17,9.64,32.9,1H26.36A1.53,1.53,0,0,0,25,1.82,4.57,4.57,0,0,1,24.2,3a2.31,2.31,0,0,1-2.26.63,2.78,2.78,0,0,1-1-.58l-1.8-1.47A2.81,2.81,0,0,0,17.4,1H1.91A.91.91,0,0,0,1,1.91V38.18A2.81,2.81,0,0,0,3.81,41H148.72A2.72,2.72,0,0,0,149.56,40.87Z" />
      <g id="ing2_outerborder">
        <path class="cls-5"
          d="M26.32,1.44h0M234.12,2c4.79,4.33,9.33,10.56,13.88,19.06A70.67,70.67,0,0,1,234.05,40H157.3a5,5,0,0,0-2.18-1,6,6,0,0,0-1.05-.09,11.68,11.68,0,0,0-3.13.54c-.5.14-1.15.33-1.95.58H2V2H18l2.29,1.86a3.94,3.94,0,0,0,1.33.76,2.87,2.87,0,0,0,.87.13,3.49,3.49,0,0,0,2.38-1A6.39,6.39,0,0,0,26,2H234.12m.37-2H25.42a1,1,0,0,0-.9.56,9.75,9.75,0,0,1-1,1.76,1.45,1.45,0,0,1-1,.43,1,1,0,0,1-.29,0,1.91,1.91,0,0,1-.65-.4L19,.22A1,1,0,0,0,18.39,0H1A1,1,0,0,0,0,1V41a1,1,0,0,0,1,1H149.15a1,1,0,0,0,.3,0c.74-.23,1.46-.45,2-.6a9.75,9.75,0,0,1,2.6-.47,4.37,4.37,0,0,1,.72.06,3.63,3.63,0,0,1,1.53.83A1,1,0,0,0,157,42h77.5a1,1,0,0,0,.71-.3c7.28-7.25,11.7-13.71,14.63-19.77a2,2,0,0,0-.05-1.85c-5.2-9.7-10-15.77-14.59-19.83a1,1,0,0,0-.67-.25Z" />
      </g>
    </g>
  </symbol>

</svg>

​

主要的变化是我的symbol.use.href现在指的是#default符号内的<g id="Ingame_Secondary_Button" ...>。无论我尝试了什么，我都无法找到解决方案，除非我绕过了#default。幸运的是，#default和#Ingame_Secondary_Button之间没有视觉上的区别。

我读过use作为一个符号创建了一个新的viewBox。我认为这与为什么我不能让它与<use href="#default"/>一起工作有关，但是这个额外的viewBox对我来说不是新闻，我一直在试图解释它。

还有一个重大变化:我从<use href="#Ingame_Secondary_Button"/>中删除了坐标。

这是我以前的回答，我认为这是值得的，尽管它并不理想，因为它展示了解决问题的另一种方法。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/74129939

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档