因此,我在容器中创建一个SVG形状.我想在SVG中放一张图片,我已经做到了.问题是,大小是固定的.它不会改变.因此,无论我从Adobe Illustrator导出什么,它都遵循相同的大小.所以,假设我用600x600px制作了这个形状,它将保持不变.它不会改变,也不会编辑.我试过很多东西.并环顾了堆栈溢出,但找不到解决方案.另一个问题是,我需要它遵循我正在做的格式.

这有点奇怪,但请原谅我.我会把所有的代码都贴在最下面.

好的,我试着像这样强行设置高度和宽度:svg width="400" height="400",但不起作用.我试着添加svg width="100%" viewBox="0 0 400 400",但不起作用.我也试过了,preserveAspectRatio="none",也不管用.

好的,下面是我的css(请忽略var.我知道他们很烦人):

此外,为了简单起见,我只是将图像更改为渐变,这样对眼睛来说更容易.

@import url("https://dl.dropbox.com/s/7uaejehfg99616j/sitevarsbackup.css");


body {
     --r1: #fff;
     --r2: #fafafa;
     --r3: #f5f5f5;
     --r4: #f0f0f0;
     --r5: #eaeaea;
     --r6: #e5e5e5;
     --r7: #e0e0e0;
     --r9: #bbb;
     --r8: 255,255,255,;
     --d1: #000;
     --d2: #222;
     --d3: #444;
     --d4: 0,0,0,;
     --blend: multiply;
     --gr1: var(--x1) 0%, var(--x2) 50%, var(--x3) 100%;
     --gr2: rgba(var(--mclr).15) 0%, rgba(var(--hclr).15) 50%, rgba(var(--gclr).15) 100%;
     --gr6: rgba(var(--mclr).2) 0%, rgba(var(--hclr).2) 50%, rgba(var(--gclr).2) 100%;
     --gr6a: rgba(var(--mclr).1) 0%, rgba(var(--gclr).1) 100%;
     --gr6b: rgba(var(--hclr).1) 0%, rgba(var(--gclr).1) 100%;
     --gr6c: rgba(var(--hclr).1) 0%, rgba(var(--mclr).1) 100%;
     --gr7: rgba(var(--mclr).5) 0%, rgba(var(--hclr).5) 50%, rgba(var(--gclr).5) 100%;
     --gr8: rgba(var(--mclr).2) 0%, rgba(var(--gclr).2) 100%;
     --gr9: rgba(var(--hclr).4) 0%, rgba(var(--gclr).4) 100%;
     --gr10: rgba(var(--hclr).4) 0%, rgba(var(--mclr).4) 100%;
     --gr11: rgba(var(--mclr).05) 0%, rgba(var(--mclr).05) 100%;
     --gr12: rgba(var(--hclr).05) 0%, rgba(var(--hclr).05) 100%;
     --gr13: rgba(var(--gclr).05) 0%, rgba(var(--gclr).05) 100%;
     --gr14: rgba(var(--gclr).15) 0%, rgba(var(--gclr).15) 100%;
     --gr3: var(--x2) 0%, var(--x3) 100%;
     --gr4: var(--x2) 0%, var(--x1) 100%;
     --gr5: var(--x1) 0%, var(--x3) 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;

}

.sk-main-container {
     padding: 10px;
     background: var(--d1);
     position: relative;
     overflow: hidden;
     margin: 40px auto;
     border-radius: 15px;
     width: 770px;
}
 .sk-main-container .sk-innercon {
     height: auto;
     position: relative;
     overflow: hidden;
     display: flex;
     justify-content: center;
}
 .sk-innercon {
     height: 0px;
}
 .sk-main-container .sk-innercon x {
     width: 770px;
     height: 770px;
     display: block;
     background: linear-gradient(90deg, rgba(var(--mclr)1) 0%, rgba(var(--hclr)1) 35%, rgba(var(--gclr)1) 100%);
     clip-path:url(#wave);
     position: relative;
     top: 0px;
     left: -10px;
}
<div id="g16">
  <div class="sk-main-container">
    <div class="sk-innercon">
      <x></x>
    </div>
  </div>
  <div class="sk-innercon">
    <svg>
      <defs>
        <clipPath id="wave">
          <path d="M293.91,383.18c-.86,1.2-1.68,2.34-2.91,4.05,4.39,2.87,8.64,5.67,12.93,8.42.64.41,1.92.37,2.11.85,2.63,6.7,11.34,7.15,13.99,13.7.45,1.11.71,2.87.14,3.73-2.18,3.31-3.09,5.74,1.53,7.99,1.76.86,2.56,3.7,3.79,5.64-2.6,1.01-5.32,3.07-7.78,2.79-4.89-.54-9.64-2.36-14.43-3.69-.57-.16-1.43-.47-1.56-.89-1.97-6.59-9.17-7.11-13.08-11.4-3.7-4.06-8.18-6.96-13.34-8.58-1.63-.51-3.71.41-5.58.68.46,1.92.27,4.75,1.48,5.62,5.51,3.93,11.4,7.32,17.18,10.86,2.6,1.59,3.03,3.28.79,5.64-3.75,3.96-9.6,5.54-14.67,3.17-4.17-1.95-7.97-4.67-12.09-6.73-1.45-.72-3.99-1.29-4.98-.54-7.86,5.94-14.46,2.06-21.15-2.19-4.07-2.59-8.19-5.11-12.32-7.62-3.22-1.96-6.37-2.14-9.11.34,8.33,6.28,16.91,12.29,24.84,19.06,2.16,1.84,3.18,5.94,3.28,9.05.13,4.11-3.54,4.77-6.54,3.59-5.8-2.29-11.52-4.91-16.97-7.95-7.08-3.95-13.87-8.42-20.78-12.68-4.61-2.84-9.22-5.7-14.04-8.68-7.63,6.13-16.42,4.81-24.89,2.89,1.01,3.12,3.06,6.71,2.27,7.52-2.11,2.15-5.31,3.82-8.32,4.38-6.45,1.2-12.14-2.21-16.91-5.67-5.81-4.21-12.25-6.67-18.5-9.8-5.99-2.99-12.09-3.62-18.53-4.14-3.92-.31-7.68-2.33-11.57-3.34-1.84-.48-4.06-.97-5.65-.33-.95.39-.88,3.02-1.54,4.52-.7,1.58-1.36,3.82-2.65,4.4-9.31,4.22-18.76,2.35-28.1-.14-.88-.23-2.18-2.33-1.94-2.69.83-1.29,2.18-3.02,3.46-3.13,4.37-.38,8.8-.15,14.6-.15-1.98-2.04-2.96-3.32-4.19-4.28-4.65-3.59-9.5-6.93-14.04-10.65-2.94-2.41-2.31-5.22.15-7.79,1.08-1.13,2.14-2.28,3.1-3.52,1.66-2.15.62-3.42-1.51-4.28-2.45-.98-5.01-1.74-7.3-3-4.62-2.54-5.1-6.23-1.31-9.93,1.74-1.71,3.87-3.03,6.38-4.95-5.97-3.08-11.65-6.05-17.37-8.95-1.11-.56-2.44-.74-3.49-1.38-2.35-1.43-4.58-3.08-3.39-6.41,1.21-3.41,3.99-3.48,6.63-2.5,7.01,2.62,13.88,5.62,20.86,8.32,4.36,1.69,8.74,4.76,13.86.53-3.57-2.09-6.89-4.06-10.23-5.99-5.24-3.03-5.7-6.87-1.61-11.24,1.29-1.38,1.95-3.36,3.14-5.51-1.52-.84-2.83-1.54-4.12-2.27-4.59-2.6-9.32-4.99-13.7-7.9-2.24-1.49-2.49-3.96-.2-6.04,3.5-3.18,15.5-3.53,18.85-.44,1,.92,1.57,2.3,2.46,3.67,2.35-.27,4.87-.37,7.3-.89,7.76-1.64,15.18-.88,22.58,2.05,2.8,1.11,6.07,1.02,9.12,1.47.29-.74.58-1.49.87-2.23-4.85-2.85-9.4-6.98-14.62-8.19-4.85-1.12-8.91-2.75-13.07-5.31-10.1-6.22-20.58-11.83-30.73-17.98-1.53-.93-2.63-3.4-2.82-5.28-.08-.79,2.63-2.09,4.24-2.76,1.26-.52,2.81-.67,4.18-.54,3.19.32,5.78.15,8.54-2.35,1.7-1.54,5.52-1.86,7.97-1.2,4.63,1.25,8.86,3.93,13.46,5.34,1.96.6,4.43-.49,6.67-.81-.87-1.61-1.34-3.84-2.68-4.71-2.51-1.63-5.47-2.69-8.36-3.62-4.47-1.43-9.29-2.04-11.29-7.37-.36-.97-1.88-1.48-2.81-2.27-1.52-1.29-3.44-2.37-4.41-4-2.22-3.72-.76-6.57,3.5-6.13,4.75.49,9.56,1.78,13.99,3.6,3.01,1.24,4.78,2.01,6.16-1.66,1.69-4.49,5.62-3.75,9.24-3.64,5.81.17,11.64.51,17.44.36,1.57-.04,3.1-1.6,4.64-2.47-.93-1.47-1.79-2.99-2.81-4.39-5.05-6.98-12.14-10.09-20.51-10.95-4.24-.44-7.04-2.42-6.95-7.31.02-1.03-1.14-2.49-2.15-3.06-5.97-3.37-12.16-6.37-18.04-9.89-1.69-1.01-2.61-3.32-3.89-5.04,1.94-1.1,3.76-2.53,5.83-3.21,3.61-1.19,7.38-1.92,11.79-3.02-1.1-1.83-1.59-2.54-1.97-3.3-1.87-3.71-.65-6.03,3.41-6.41,1.73-.16,3.46-.28,5.2-.33,4.58-.14,7.94-1.56,8.11-6.95.04-1.17.88-2.32,1.44-3.72-3.74-.93-7.63-1.95-11.54-2.86-4.48-1.04-6.35-4.27-7.39-8.93-6.05,1.77-10.24.8-13.2-6.06-1.65-3.83-7.36-5.92-11.25-8.78-.5-.36-1.27-.53-1.54-1-1.17-2.09-2.2-4.25-3.27-6.39,1.51-.65,3.23-2.1,4.5-1.78,2.12.53,4.04,2.08,5.86,3.43.64.48.74,1.66,1.15,2.68,3.86-.76,7.62-1.51,11.61-2.29-4.26-2.99-8.53-5.99-12.8-8.99.81-1.13,1.62-2.26,2.43-3.38,3.21-.91,6.42-1.81,9.73-2.75-.62-.94-1.5-2.26-2.37-3.59.37-.44.74-.87,1.1-1.31,1.86,1.3,3.96,2.37,5.53,3.96,1.68,1.7,2.88,3.88,5.19,7.13,2.19-3.61,3.81-6.28,5.81-9.58-4.01-1.36-7.03-1.9-9.52-3.34-5.34-3.08-10.34-6.77-15.62-9.96-7.24-4.38-14.7-8.4-21.87-12.88-1.71-1.07-2.65-3.37-3.94-5.1,1.88-1.1,3.74-3.06,5.65-3.11,3.39-.08,6.8,1.02,10.21,1.57,1.53.25,3.08.35,6,.67-3.08-3.24-5.19-5.26-7.05-7.48-2.84-3.39-2.19-6.07,1.93-7.7,5.48-2.16,10.55-.08,15.49,2.04,5.02,2.15,9.75,5.65,14.95,6.53,8.69,1.47,16.07,5.31,23.75,9.14,6.76,3.36,14.26,5.24,21.4,7.85,1.25.46,2.51,1.14,3.48,2.03,4.75,4.37,8.2,4.12,12.38-1.34-34.02-18.22-67.71-36.91-101.03-58.03,9.37-5.74,16.89-3.71,24.41.95,3.96,2.45,8.24,4.12,12.9.17-2.28-1.84-4.5-3.48-6.54-5.32-.99-.89-2.28-2.15-2.27-3.22.01-.81,1.8-1.75,2.94-2.37,5.19-2.84,10.14-2.63,15.05.95,1.55,1.13,3.83,1.18,5.63,2.04,6.57,3.14,13.01,6.56,19.64,9.56,2.36,1.07,5.11,1.48,7.72,1.72,1.1.1,3.25-.96,3.28-1.58.07-1.31-.58-3.13-1.58-3.93-2.17-1.74-4.59-3.41-7.18-4.33-9.15-3.28-15.81-9.94-22.81-16.17-2.56-2.28-5.28-4.44-7.52-7.01-.93-1.07-1.59-3.58-.97-4.52.85-1.31,3.25-2.7,4.58-2.38,3.74.89,7.41,2.37,10.86,4.09,8.7,4.35,17.25,8.97,25.88,13.47,5.49,2.86,6.97,2.46,10.26-2.67,2.48-3.86,9.79-5.54,13.76-2.94,2.4,1.57,4.76,2.47,6.37-.48,1.56-2.87.6-4.97-2.89-5.96-2.17-.62-4-2.35-6.14-3.13-1.99-.71-4.2-.81-6.37-1.19,2.82-9.57,13.01-12.12,20.21-6.52,5.41,4.2,12.01,6.87,18.09,10.21,3.51,1.93,7.03,3.84,11.11,5.16.59-7.27-9.42-7.56-8.72-14.7,10.42-5.54,19.18,5.87,29.64,3.82-3.57-7.02-2.46-9.21,5.09-7.89,8.24,1.44,16.21,4.46,24.24,6.99,5.31,1.68,10.47,3.82,15.78,5.5,1.33.42,2.98-.18,4.55-.32-2.83-4.87,1.16-7.69,3.22-10.56.76-1.06,5.29-1.03,6.54.16,6.62,6.3,14.39,6.75,22.45,4.91,6.18-1.41,11.3.85,16.46,3.27,4.5,2.12,8.77,4.74,13.16,7.09,2.72,1.45,5.33,2.24,8.28.11,4.04-2.92,8.25-2.45,12.21.42,3.87,2.81,7.46,2.77,11.72.27,2.15-1.26,5.83-1.5,8.17-.57,8.27,3.29,16.21,7.39,24.39,10.91,1.72.74,3.93.32,6.28.46v-4.85c8.93,1.34,18.61,10.2,19.44,18.06-4.05-.37-8-.74-12.4-1.15.89,1.43,1.81,2.37,2.04,3.45.24,1.11.2,2.73-.45,3.45-.6.65-2.34.78-3.33.43-4.1-1.45-8.11-3.16-12.15-4.78-.36.35-.73.69-1.09,1.04,1.01,1.36,1.75,3.16,3.08,4,7.12,4.52,14.4,8.81,21.62,13.19.48.29.92.65,1.6,1.14-2.81,3.13-5.77,4.05-9.41,2.43-3.3-1.47-6.53-3.19-9.96-4.22-2.02-.61-4.37-.11-6.58-.11-.12.62-.23,1.24-.35,1.86,3.47,1.91,7.05,3.65,10.37,5.78,1.83,1.18,4.54,3.05,4.5,4.55-.05,1.8-2.44,3.71-4.11,5.24-1.33,1.23-3.11,1.97-4.69,2.92,4.92,7.58,3.72,10.37-5.07,12.45-3.64.86-7.31,1.61-11.07,3.59,2.13.49,4.23,1.19,6.39,1.42,8.41.91,8.42.85,10.41,8.89,6.58-1.07,10.54,2.34,12.5,8.31,1.24,3.78.56,7.12-4.09,7.82-3.85.58-7.79,1-11.67.91-4.07-.09-6.7-1.54-6.14-6.79.19-1.76-3.33-3.92-5.72-6.51-1.58,3.67-2.62,6.1-4.03,9.38,6.42,4.91,12.93,9.91,19.47,14.88,2.58,1.96,5.26,3.8,7.78,5.84.62.5,1.31,1.99,1.07,2.3-1.79,2.22-3.61,4.54-5.86,6.22-1,.75-3.04.13-4.66.13-.6-1.92-1.15-3.66-1.7-5.41-.46-.07-.91-.14-1.37-.22-1.72,2.86-3.44,5.71-4.81,7.99,3.16,2.72,5.35,5.16,8.04,6.76,2.17,1.3,5.06,1.34,7.41,2.41,1.91.87,3.51,2.44,5.24,3.71-1.58,1.22-3,2.81-4.77,3.59-2.8,1.23-5.85,1.91-10,3.2,3.94,3.07,7.14,5.87,10.66,8.21,3.38,2.24,7.43,3.54,10.53,6.06,2.92,2.38,5.38,5.59,7.26,8.88.86,1.51.63,4.91-.5,5.98-1.35,1.28-4.21,1.39-6.39,1.29-5.42-.25-10.81-1.04-16.23-1.35-5.65-.32-11.32-.31-16.98-.49-2.13-.07-4.25-.27-6.55.17,3.2,3.19,6.55,5.78,11.3,5.84,4.04.05,8.44-.26,7.36,6.11-.09.53.62,1.38,1.17,1.79,5.3,3.99,10.65,7.9,15.96,11.88,3.51,2.63,3.55,4.25-.37,5.68-3,1.09-6.37,1.2-9.6,1.57-3.65.42-7.31.64-10.97.94l-.29,1.46c1.82,1.59,3.94,2.97,5.34,4.87.64.86.11,3.92-.31,4.01-3.39.74-7.44,2.32-10.25,1.16-8.51-3.52-16.55-8.18-24.79-12.34-3.9-1.97-7.75-4.08-11.81-5.65-4.89-1.89-7.9,1.37-7.76,6.65.14,5.24,2.95,7.48,6.92,10.01,11.73,7.47,23.1,15.51,34.69,23.22,4.92,3.28,10.06,6.23,15.03,9.43,1,.64,1.69,1.76,2.79,2.95-5.29,5.11-10.45,2.72-15.89.52-.7,1.1-1.43,2.23-2.21,3.46.5.53.87,1.05,1.36,1.42,4.22,3.14,8.39,6.35,12.72,9.34,4.82,3.33,4.77,7.02,2.11,10-4.74.94-8.4,1.67-12.19,2.42,3.02,6.78,7.89,9.06,15.28,6.59-.21.59-.43,1.18-.64,1.76-.97.62-1.94,1.24-3.36,2.15,1.19.91,2.2,1.54,3.03,2.36,1.45,1.43,2.78,2.97,4.16,4.47-1.75,1.42-3.44,2.91-5.28,4.21-.58.41-1.69.65-2.28.37-5.81-2.71-8.9,1.11-11.26,4.11.48,3.67,2.16,7.48.93,9.52-1.26,2.07-5.39,2.38-8.89,3.7,13.4,11.77,28.53,20.65,43.9,29.32-4.04,4.96-9.06,6.04-13.66,3.43-8.53-4.83-17.64-8.96-25.22-14.99-4.36-3.47-8.99-6.01-13.6-8.82-1.87-1.14-3.38-1.75-4.58.66-.97,1.95-2.41,3.93.33,5.71,3.77,2.44,7.71,4.69,11.23,7.46,5.47,4.31,10.92,8.72,15.83,13.64,2.05,2.06,2.27,5.48-.7,7.89-5.14,4.18-5.37,10.38-5.27,16,.05,2.49,2.92,6.33,7.27,5.75,2.92-.39,5.81-1.01,8.71-1.52-1.4,7.77-5.17,11.5-13.03,11.85-4.5.2-9.12-.13-13.54-.98-4.81-.93-7.61-4.43-9.29-9.08-.51-1.41-2.37-2.74-3.91-3.3-8.95-3.24-16.66-8.53-24.56-13.68-9.85-6.43-20.25-12.01-30.76-18.17Z" />
      </defs>
    </svg>
  </div>
</div>

推荐答案

你需要在你的clipPath的基础上加clipPathUnits="objectBoundingBox".它将使您的clipPath使用边界框单位.然后将scale属性应用于path.相应地更改比例值.

<clipPath id="wave" clipPathUnits="objectBoundingBox">
  <path transform="scale(0.00225)" d="M293.91..." />

查看下面的代码片段中的完整代码:

@import url("https://dl.dropbox.com/s/7uaejehfg99616j/sitevarsbackup.css");


body {
     --r1: #fff;
     --r2: #fafafa;
     --r3: #f5f5f5;
     --r4: #f0f0f0;
     --r5: #eaeaea;
     --r6: #e5e5e5;
     --r7: #e0e0e0;
     --r9: #bbb;
     --r8: 255,255,255,;
     --d1: #000;
     --d2: #222;
     --d3: #444;
     --d4: 0,0,0,;
     --blend: multiply;
     --gr1: var(--x1) 0%, var(--x2) 50%, var(--x3) 100%;
     --gr2: rgba(var(--mclr).15) 0%, rgba(var(--hclr).15) 50%, rgba(var(--gclr).15) 100%;
     --gr6: rgba(var(--mclr).2) 0%, rgba(var(--hclr).2) 50%, rgba(var(--gclr).2) 100%;
     --gr6a: rgba(var(--mclr).1) 0%, rgba(var(--gclr).1) 100%;
     --gr6b: rgba(var(--hclr).1) 0%, rgba(var(--gclr).1) 100%;
     --gr6c: rgba(var(--hclr).1) 0%, rgba(var(--mclr).1) 100%;
     --gr7: rgba(var(--mclr).5) 0%, rgba(var(--hclr).5) 50%, rgba(var(--gclr).5) 100%;
     --gr8: rgba(var(--mclr).2) 0%, rgba(var(--gclr).2) 100%;
     --gr9: rgba(var(--hclr).4) 0%, rgba(var(--gclr).4) 100%;
     --gr10: rgba(var(--hclr).4) 0%, rgba(var(--mclr).4) 100%;
     --gr11: rgba(var(--mclr).05) 0%, rgba(var(--mclr).05) 100%;
     --gr12: rgba(var(--hclr).05) 0%, rgba(var(--hclr).05) 100%;
     --gr13: rgba(var(--gclr).05) 0%, rgba(var(--gclr).05) 100%;
     --gr14: rgba(var(--gclr).15) 0%, rgba(var(--gclr).15) 100%;
     --gr3: var(--x2) 0%, var(--x3) 100%;
     --gr4: var(--x2) 0%, var(--x1) 100%;
     --gr5: var(--x1) 0%, var(--x3) 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;

}

.sk-main-container {
     padding: 10px;
     background: var(--d1);
     position: relative;
     overflow: hidden;
     margin: 40px auto;
     border-radius: 15px;
     width: 770px;
}
 .sk-main-container .sk-innercon {
     height: auto;
     position: relative;
     overflow: hidden;
     display: flex;
     justify-content: center;
}
 .sk-innercon {
     height: 0px;
}
 .sk-main-container .sk-innercon x {
     width: 770px;
     height: 770px;
     display: block;
     background: linear-gradient(90deg, rgba(var(--mclr)1) 0%, rgba(var(--hclr)1) 35%, rgba(var(--gclr)1) 100%);
     clip-path:url(#wave);
     position: relative;
     top: 0px;
     left: -10px;
}
<div id="g16">
  <div class="sk-main-container">
    <div class="sk-innercon">
      <x></x>
    </div>
  </div>
  <div class="sk-innercon">
    <svg>
      <defs>
        <clipPath id="wave" clipPathUnits="objectBoundingBox">
          <path transform="scale(0.002584446799, 0.002260755545)" d="M293.91,383.18c-.86,1.2-1.68,2.34-2.91,4.05,4.39,2.87,8.64,5.67,12.93,8.42.64.41,1.92.37,2.11.85,2.63,6.7,11.34,7.15,13.99,13.7.45,1.11.71,2.87.14,3.73-2.18,3.31-3.09,5.74,1.53,7.99,1.76.86,2.56,3.7,3.79,5.64-2.6,1.01-5.32,3.07-7.78,2.79-4.89-.54-9.64-2.36-14.43-3.69-.57-.16-1.43-.47-1.56-.89-1.97-6.59-9.17-7.11-13.08-11.4-3.7-4.06-8.18-6.96-13.34-8.58-1.63-.51-3.71.41-5.58.68.46,1.92.27,4.75,1.48,5.62,5.51,3.93,11.4,7.32,17.18,10.86,2.6,1.59,3.03,3.28.79,5.64-3.75,3.96-9.6,5.54-14.67,3.17-4.17-1.95-7.97-4.67-12.09-6.73-1.45-.72-3.99-1.29-4.98-.54-7.86,5.94-14.46,2.06-21.15-2.19-4.07-2.59-8.19-5.11-12.32-7.62-3.22-1.96-6.37-2.14-9.11.34,8.33,6.28,16.91,12.29,24.84,19.06,2.16,1.84,3.18,5.94,3.28,9.05.13,4.11-3.54,4.77-6.54,3.59-5.8-2.29-11.52-4.91-16.97-7.95-7.08-3.95-13.87-8.42-20.78-12.68-4.61-2.84-9.22-5.7-14.04-8.68-7.63,6.13-16.42,4.81-24.89,2.89,1.01,3.12,3.06,6.71,2.27,7.52-2.11,2.15-5.31,3.82-8.32,4.38-6.45,1.2-12.14-2.21-16.91-5.67-5.81-4.21-12.25-6.67-18.5-9.8-5.99-2.99-12.09-3.62-18.53-4.14-3.92-.31-7.68-2.33-11.57-3.34-1.84-.48-4.06-.97-5.65-.33-.95.39-.88,3.02-1.54,4.52-.7,1.58-1.36,3.82-2.65,4.4-9.31,4.22-18.76,2.35-28.1-.14-.88-.23-2.18-2.33-1.94-2.69.83-1.29,2.18-3.02,3.46-3.13,4.37-.38,8.8-.15,14.6-.15-1.98-2.04-2.96-3.32-4.19-4.28-4.65-3.59-9.5-6.93-14.04-10.65-2.94-2.41-2.31-5.22.15-7.79,1.08-1.13,2.14-2.28,3.1-3.52,1.66-2.15.62-3.42-1.51-4.28-2.45-.98-5.01-1.74-7.3-3-4.62-2.54-5.1-6.23-1.31-9.93,1.74-1.71,3.87-3.03,6.38-4.95-5.97-3.08-11.65-6.05-17.37-8.95-1.11-.56-2.44-.74-3.49-1.38-2.35-1.43-4.58-3.08-3.39-6.41,1.21-3.41,3.99-3.48,6.63-2.5,7.01,2.62,13.88,5.62,20.86,8.32,4.36,1.69,8.74,4.76,13.86.53-3.57-2.09-6.89-4.06-10.23-5.99-5.24-3.03-5.7-6.87-1.61-11.24,1.29-1.38,1.95-3.36,3.14-5.51-1.52-.84-2.83-1.54-4.12-2.27-4.59-2.6-9.32-4.99-13.7-7.9-2.24-1.49-2.49-3.96-.2-6.04,3.5-3.18,15.5-3.53,18.85-.44,1,.92,1.57,2.3,2.46,3.67,2.35-.27,4.87-.37,7.3-.89,7.76-1.64,15.18-.88,22.58,2.05,2.8,1.11,6.07,1.02,9.12,1.47.29-.74.58-1.49.87-2.23-4.85-2.85-9.4-6.98-14.62-8.19-4.85-1.12-8.91-2.75-13.07-5.31-10.1-6.22-20.58-11.83-30.73-17.98-1.53-.93-2.63-3.4-2.82-5.28-.08-.79,2.63-2.09,4.24-2.76,1.26-.52,2.81-.67,4.18-.54,3.19.32,5.78.15,8.54-2.35,1.7-1.54,5.52-1.86,7.97-1.2,4.63,1.25,8.86,3.93,13.46,5.34,1.96.6,4.43-.49,6.67-.81-.87-1.61-1.34-3.84-2.68-4.71-2.51-1.63-5.47-2.69-8.36-3.62-4.47-1.43-9.29-2.04-11.29-7.37-.36-.97-1.88-1.48-2.81-2.27-1.52-1.29-3.44-2.37-4.41-4-2.22-3.72-.76-6.57,3.5-6.13,4.75.49,9.56,1.78,13.99,3.6,3.01,1.24,4.78,2.01,6.16-1.66,1.69-4.49,5.62-3.75,9.24-3.64,5.81.17,11.64.51,17.44.36,1.57-.04,3.1-1.6,4.64-2.47-.93-1.47-1.79-2.99-2.81-4.39-5.05-6.98-12.14-10.09-20.51-10.95-4.24-.44-7.04-2.42-6.95-7.31.02-1.03-1.14-2.49-2.15-3.06-5.97-3.37-12.16-6.37-18.04-9.89-1.69-1.01-2.61-3.32-3.89-5.04,1.94-1.1,3.76-2.53,5.83-3.21,3.61-1.19,7.38-1.92,11.79-3.02-1.1-1.83-1.59-2.54-1.97-3.3-1.87-3.71-.65-6.03,3.41-6.41,1.73-.16,3.46-.28,5.2-.33,4.58-.14,7.94-1.56,8.11-6.95.04-1.17.88-2.32,1.44-3.72-3.74-.93-7.63-1.95-11.54-2.86-4.48-1.04-6.35-4.27-7.39-8.93-6.05,1.77-10.24.8-13.2-6.06-1.65-3.83-7.36-5.92-11.25-8.78-.5-.36-1.27-.53-1.54-1-1.17-2.09-2.2-4.25-3.27-6.39,1.51-.65,3.23-2.1,4.5-1.78,2.12.53,4.04,2.08,5.86,3.43.64.48.74,1.66,1.15,2.68,3.86-.76,7.62-1.51,11.61-2.29-4.26-2.99-8.53-5.99-12.8-8.99.81-1.13,1.62-2.26,2.43-3.38,3.21-.91,6.42-1.81,9.73-2.75-.62-.94-1.5-2.26-2.37-3.59.37-.44.74-.87,1.1-1.31,1.86,1.3,3.96,2.37,5.53,3.96,1.68,1.7,2.88,3.88,5.19,7.13,2.19-3.61,3.81-6.28,5.81-9.58-4.01-1.36-7.03-1.9-9.52-3.34-5.34-3.08-10.34-6.77-15.62-9.96-7.24-4.38-14.7-8.4-21.87-12.88-1.71-1.07-2.65-3.37-3.94-5.1,1.88-1.1,3.74-3.06,5.65-3.11,3.39-.08,6.8,1.02,10.21,1.57,1.53.25,3.08.35,6,.67-3.08-3.24-5.19-5.26-7.05-7.48-2.84-3.39-2.19-6.07,1.93-7.7,5.48-2.16,10.55-.08,15.49,2.04,5.02,2.15,9.75,5.65,14.95,6.53,8.69,1.47,16.07,5.31,23.75,9.14,6.76,3.36,14.26,5.24,21.4,7.85,1.25.46,2.51,1.14,3.48,2.03,4.75,4.37,8.2,4.12,12.38-1.34-34.02-18.22-67.71-36.91-101.03-58.03,9.37-5.74,16.89-3.71,24.41.95,3.96,2.45,8.24,4.12,12.9.17-2.28-1.84-4.5-3.48-6.54-5.32-.99-.89-2.28-2.15-2.27-3.22.01-.81,1.8-1.75,2.94-2.37,5.19-2.84,10.14-2.63,15.05.95,1.55,1.13,3.83,1.18,5.63,2.04,6.57,3.14,13.01,6.56,19.64,9.56,2.36,1.07,5.11,1.48,7.72,1.72,1.1.1,3.25-.96,3.28-1.58.07-1.31-.58-3.13-1.58-3.93-2.17-1.74-4.59-3.41-7.18-4.33-9.15-3.28-15.81-9.94-22.81-16.17-2.56-2.28-5.28-4.44-7.52-7.01-.93-1.07-1.59-3.58-.97-4.52.85-1.31,3.25-2.7,4.58-2.38,3.74.89,7.41,2.37,10.86,4.09,8.7,4.35,17.25,8.97,25.88,13.47,5.49,2.86,6.97,2.46,10.26-2.67,2.48-3.86,9.79-5.54,13.76-2.94,2.4,1.57,4.76,2.47,6.37-.48,1.56-2.87.6-4.97-2.89-5.96-2.17-.62-4-2.35-6.14-3.13-1.99-.71-4.2-.81-6.37-1.19,2.82-9.57,13.01-12.12,20.21-6.52,5.41,4.2,12.01,6.87,18.09,10.21,3.51,1.93,7.03,3.84,11.11,5.16.59-7.27-9.42-7.56-8.72-14.7,10.42-5.54,19.18,5.87,29.64,3.82-3.57-7.02-2.46-9.21,5.09-7.89,8.24,1.44,16.21,4.46,24.24,6.99,5.31,1.68,10.47,3.82,15.78,5.5,1.33.42,2.98-.18,4.55-.32-2.83-4.87,1.16-7.69,3.22-10.56.76-1.06,5.29-1.03,6.54.16,6.62,6.3,14.39,6.75,22.45,4.91,6.18-1.41,11.3.85,16.46,3.27,4.5,2.12,8.77,4.74,13.16,7.09,2.72,1.45,5.33,2.24,8.28.11,4.04-2.92,8.25-2.45,12.21.42,3.87,2.81,7.46,2.77,11.72.27,2.15-1.26,5.83-1.5,8.17-.57,8.27,3.29,16.21,7.39,24.39,10.91,1.72.74,3.93.32,6.28.46v-4.85c8.93,1.34,18.61,10.2,19.44,18.06-4.05-.37-8-.74-12.4-1.15.89,1.43,1.81,2.37,2.04,3.45.24,1.11.2,2.73-.45,3.45-.6.65-2.34.78-3.33.43-4.1-1.45-8.11-3.16-12.15-4.78-.36.35-.73.69-1.09,1.04,1.01,1.36,1.75,3.16,3.08,4,7.12,4.52,14.4,8.81,21.62,13.19.48.29.92.65,1.6,1.14-2.81,3.13-5.77,4.05-9.41,2.43-3.3-1.47-6.53-3.19-9.96-4.22-2.02-.61-4.37-.11-6.58-.11-.12.62-.23,1.24-.35,1.86,3.47,1.91,7.05,3.65,10.37,5.78,1.83,1.18,4.54,3.05,4.5,4.55-.05,1.8-2.44,3.71-4.11,5.24-1.33,1.23-3.11,1.97-4.69,2.92,4.92,7.58,3.72,10.37-5.07,12.45-3.64.86-7.31,1.61-11.07,3.59,2.13.49,4.23,1.19,6.39,1.42,8.41.91,8.42.85,10.41,8.89,6.58-1.07,10.54,2.34,12.5,8.31,1.24,3.78.56,7.12-4.09,7.82-3.85.58-7.79,1-11.67.91-4.07-.09-6.7-1.54-6.14-6.79.19-1.76-3.33-3.92-5.72-6.51-1.58,3.67-2.62,6.1-4.03,9.38,6.42,4.91,12.93,9.91,19.47,14.88,2.58,1.96,5.26,3.8,7.78,5.84.62.5,1.31,1.99,1.07,2.3-1.79,2.22-3.61,4.54-5.86,6.22-1,.75-3.04.13-4.66.13-.6-1.92-1.15-3.66-1.7-5.41-.46-.07-.91-.14-1.37-.22-1.72,2.86-3.44,5.71-4.81,7.99,3.16,2.72,5.35,5.16,8.04,6.76,2.17,1.3,5.06,1.34,7.41,2.41,1.91.87,3.51,2.44,5.24,3.71-1.58,1.22-3,2.81-4.77,3.59-2.8,1.23-5.85,1.91-10,3.2,3.94,3.07,7.14,5.87,10.66,8.21,3.38,2.24,7.43,3.54,10.53,6.06,2.92,2.38,5.38,5.59,7.26,8.88.86,1.51.63,4.91-.5,5.98-1.35,1.28-4.21,1.39-6.39,1.29-5.42-.25-10.81-1.04-16.23-1.35-5.65-.32-11.32-.31-16.98-.49-2.13-.07-4.25-.27-6.55.17,3.2,3.19,6.55,5.78,11.3,5.84,4.04.05,8.44-.26,7.36,6.11-.09.53.62,1.38,1.17,1.79,5.3,3.99,10.65,7.9,15.96,11.88,3.51,2.63,3.55,4.25-.37,5.68-3,1.09-6.37,1.2-9.6,1.57-3.65.42-7.31.64-10.97.94l-.29,1.46c1.82,1.59,3.94,2.97,5.34,4.87.64.86.11,3.92-.31,4.01-3.39.74-7.44,2.32-10.25,1.16-8.51-3.52-16.55-8.18-24.79-12.34-3.9-1.97-7.75-4.08-11.81-5.65-4.89-1.89-7.9,1.37-7.76,6.65.14,5.24,2.95,7.48,6.92,10.01,11.73,7.47,23.1,15.51,34.69,23.22,4.92,3.28,10.06,6.23,15.03,9.43,1,.64,1.69,1.76,2.79,2.95-5.29,5.11-10.45,2.72-15.89.52-.7,1.1-1.43,2.23-2.21,3.46.5.53.87,1.05,1.36,1.42,4.22,3.14,8.39,6.35,12.72,9.34,4.82,3.33,4.77,7.02,2.11,10-4.74.94-8.4,1.67-12.19,2.42,3.02,6.78,7.89,9.06,15.28,6.59-.21.59-.43,1.18-.64,1.76-.97.62-1.94,1.24-3.36,2.15,1.19.91,2.2,1.54,3.03,2.36,1.45,1.43,2.78,2.97,4.16,4.47-1.75,1.42-3.44,2.91-5.28,4.21-.58.41-1.69.65-2.28.37-5.81-2.71-8.9,1.11-11.26,4.11.48,3.67,2.16,7.48.93,9.52-1.26,2.07-5.39,2.38-8.89,3.7,13.4,11.77,28.53,20.65,43.9,29.32-4.04,4.96-9.06,6.04-13.66,3.43-8.53-4.83-17.64-8.96-25.22-14.99-4.36-3.47-8.99-6.01-13.6-8.82-1.87-1.14-3.38-1.75-4.58.66-.97,1.95-2.41,3.93.33,5.71,3.77,2.44,7.71,4.69,11.23,7.46,5.47,4.31,10.92,8.72,15.83,13.64,2.05,2.06,2.27,5.48-.7,7.89-5.14,4.18-5.37,10.38-5.27,16,.05,2.49,2.92,6.33,7.27,5.75,2.92-.39,5.81-1.01,8.71-1.52-1.4,7.77-5.17,11.5-13.03,11.85-4.5.2-9.12-.13-13.54-.98-4.81-.93-7.61-4.43-9.29-9.08-.51-1.41-2.37-2.74-3.91-3.3-8.95-3.24-16.66-8.53-24.56-13.68-9.85-6.43-20.25-12.01-30.76-18.17Z" />
      </defs>
    </svg>
  </div>
</div>


Update:

在 comments 中回答你的问题--

正如@Eddy提到的,加clipPathUnits="objectBoundingBox"等同于在viewBox="0 0 1 1"中插入path.要zoom 路径以完全适合此视图框,您需要知道路径的原始大小;结果是386.93px x 442.33px(见附图).

path size

现在可以计算出规模如下:

scaleX = 1 / 386.93 = 0.002584446799
scaleY = 1 / 442.33 = 0.002260755545

因此,path中的transform属性值应该是scale(0.002584446799, 0.002260755545).

现在,您可以调整剪辑路径(zoom /拉伸/等)并完全覆盖您想要的任何元素.


Update 2:

我看到它被切到了示例代码片段中.原始的SVG路径似乎有一个偏移量(23.1px x 4.9px).通过在Illustrator或任何矢量工具中移动路径来复制SVG文件可以解决此问题.您也可以使用css或style属性来移动它.我个人更喜欢复制SVG.

Html相关问答推荐

使用Scrapy Select 最后一个子文本

注册组件不显示当我导航到注册站点

纯CSS语音气泡与半透明背景和边框

为什么在CSS中字段是一个有效的 colored颜色 名称?

文本css后面未显示背景 colored颜色

如何删除FONT创建的文本下方的空格

HTML 邮箱在 Gmail 中无法正确显示

如何保持块扩展以填充视口?

复制两个

会产生一个空行;复制

元素不会

在shiny 的应用程序中使用图标功能时出错

我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列?

我应该如何使这个带有标签的隐藏复选框可访问

Css 左属性问题

我可以在标签元素中使用标题元素吗?

使用模板循环每行列出 3 个 bootstrap 卡

如何突出显示 .qmd html 文件中的特定代码行

如何向上移动图像并溢出图像的一部分而另一部分不溢出

基本上,我想要两列包含文本和图像,但第二列是倒置的

CSS:如何在模糊的背景上剪切文本?