没有运气调整SVG剪辑路径的大小

2024-05-20 • 问答

我无法调整剪辑路径的大小。我的目标是让div的渐变被路径裁剪，并使整个内容位于页面的右上角并保持响应速度。

.bg-gradient {
  background: linear-gradient(238.72deg,#9086FF 0%,#000000 100%),linear-gradient(301.28deg,#FF0000 0%,#20002C 100%),linear-gradient(121.28deg,#207A00 0%,#950000 100%),linear-gradient(238.72deg,#00D1FF 0%,#A80000 100%),linear-gradient(58.72deg,#B80000 0%,#1B00C2 100%),linear-gradient(125.95deg,#00E0FF 10.95%,#87009D 100%),linear-gradient(263.7deg,#B60000 3.43%,#B100A0 96.57%),linear-gradient(320.54deg,#800000 0%,#00C2FF 72.37%),linear-gradient(130.22deg,#B9C900 18.02%,#8F73FF 100%);
  background-blend-mode: color-dodge,difference,color-dodge,lighten,normal;

  width: 600px;
  height: 400px;
  position: absolute;
  right: 0;
  top: 0;

  -webkit-clip-path: url(#clippath);
  clip-path: url(#clippath);
}

<html>

<body>

<?xml version="1.0" encoding="utf-8"?>
    <svg class='svg-clippath' viewBox="0 0 617.7 261.8" style="enable-background:new 0 0 617.7 261.8;" xml:space="preserve">


      <defs>
        <clipPath id='clippath'>
          <path class="st1" d="M552.9,244.1l-58.3-100.9c-36.7-63.6-128.5-63.6-       165.3,0l0,0l-22.8,39.5l22.8-39.5l0,0
    l-41,70.9c-36.7,63.6-128.5,63.6-165.3,0L-0.5,0h329.8H412l0,0h206.2l0,0v226.6C618.2,262.4,570.8,275.1,552.9,244.1z" />
        </clipPath>
      </defs>
      <div class='bg-gradient'></div>
    </svg>
    
</body>
</html>

我发现代码有几个问题：

<?xml version="1.0" encoding="utf-8"?>行用于独立文件中，但您无需在脚本中包含它，因此不应在该位置包含它（see this question）。
div不属于svg代码。您可以使用svg将外部元素添加到foreignObject。
剪切路径不正确，某些减号与其数字之间存在空格。

通过修复这些问题，它似乎可以工作，但是您需要将单位更正为所需的操作。您的bg-gradient的像素为width和height，但同时您的svg声明的像素为viewBox，因此最终尺寸取决于相互作用两者之间。

.bg-gradient {
  background: linear-gradient(238.72deg,#9086FF 0%,#000000 100%),linear-gradient(301.28deg,#FF0000 0%,#20002C 100%),linear-gradient(121.28deg,#207A00 0%,#950000 100%),linear-gradient(238.72deg,#00D1FF 0%,#A80000 100%),linear-gradient(58.72deg,#B80000 0%,#1B00C2 100%),linear-gradient(125.95deg,#00E0FF 10.95%,#87009D 100%),linear-gradient(263.7deg,#B60000 3.43%,#B100A0 96.57%),linear-gradient(320.54deg,#800000 0%,#00C2FF 72.37%),linear-gradient(130.22deg,#B9C900 18.02%,#8F73FF 100%);
  background-blend-mode: color-dodge,difference,color-dodge,lighten,normal;

  width: 600px;
  height: 400px;
  position: absolute;
  right: 0;
  top: 0;

  -webkit-clip-path: url(#clippath);
  clip-path: url(#clippath);
}

<html>

<body>

    <svg class='svg-clippath' viewBox="0 0 617.7 261.8" style="enable-background:new 0 0 617.7 261.8;" xml:space="preserve">


      <defs>
        <clipPath id='clippath'>
          <path class="st1" d="M552.9,244.1l-58.3-100.9c-36.7-63.6-128.5-63.6-165.3,0l0,0l-22.8,39.5l22.8-39.5l0,0
    l-41,70.9c-36.7,63.6-128.5,63.6-165.3,0L-0.5,0h329.8H412l0,0h206.2l0,0v226.6C618.2,262.4,570.8,275.1,552.9,244.1z" />
        </clipPath>
      </defs>
      <foreignObject clip-path="url(#clippath)" width="100%" height="100%">
  <div class='bg-gradient'></div>
  </foreignObject>
    </svg>
    
</body>
</html>

没有运气调整SVG剪辑路径的大小

dongyingyifeng 回答：没有运气调整SVG剪辑路径的大小

大家都在问