没有运气调整 svg 剪辑路径

Question

我在调整剪辑路径的大小时遇到问题。我的目标是让带有渐变的 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%, #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>

Answer 1

我发现代码有几个问题：

<?xml version="1.0" encoding="utf-8"?>行在独立文件中使用，但你不需要在脚本中包含它，也不应该在那个地方包含它().
A div 不属于 svg 代码。您可以使用 foreignObject.

svg

裁剪路径不正确，部分减号和数字之间有空格

通过修复这些，它似乎可以工作，但您需要将单位更正为您想要做的任何事情。您的 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>

没有运气调整 svg 剪辑路径

Having no luck resizing svg clip path

scaling

svg

clip