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

用户名

我无法调整剪辑路径的大小。我的目标是div通过路径剪切具有渐变的a，并使整个内容位于页面的右上角并做出响应。

.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%, #000000 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, difference, lighten, difference, color-dodge, difference, difference, 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,0l0,0l0,0l0,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>

vqf

我发现代码有几个问题：

该<?xml version="1.0" encoding="utf-8"?>行用于独立文件中，但是您无需在脚本中包含该行，因此不应在该位置包含它（请参阅此问题）。
Adiv不属于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%, #000000 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, difference, lighten, difference, color-dodge, difference, difference, 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,0l0,0l0,0l0,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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。