Question

我有一个div，该div是使用SVG内部的<clipPath>元素裁剪的。一切都很好，只不过我需要将红色div的剪切部分锚定到左下角而不是左上角。像这样：

调整浏览器窗口的大小时，剪切的红色div应该像当前对左上角所做的那样粘在左下角。这是codepen。反正有这样做吗？我是否需要以某种方式翻转坐标平面？

Answer 1

“坐标翻转”对于您尝试的操作可能不是一个好名字，因为这意味着您的剪切路径形状将被反转-从您的示例中看来，您只想对其进行翻译。

执行此操作的方法可能看起来有些复杂，但它可以起作用：将<svg>元素以相同的大小放在剪切的div所在的位置。然后，您可以利用SVG定位机制来沿其尺寸移动路径：首先，向上移动（负y方向），使其下边界位于其顶部，即其高度。然后，再次将其向下移动（y方向为正）<svg>高度的100％。

下一个问题是您必须结合绝对翻译和相对翻译。在CSS中，您可以将其写为calc(100% - 33px)，但这在这里不起作用。相反，您首先使用属性transform="translate(0,-33)"向上移动路径，然后使用<use>元素对其进行引用，该元素的优势在于它具有y属性，可以占百分比值。

#Song2{
  top: 3.3333vh;
  right: 1.6%;    
  position: absolute;
  width: 47.6%;
  height: 16.6666vh;
  overflow: hidden;
  background-color: yellow;
} 

#Song2svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

#Song2sub{
  width: 100%;
  height: 100%;
  background-color: red;
  clip-path: url(#fltcnrCP1);
}

<div id="Song2">
  <svg id="Song2svg">
    <defs>
      <path id="cpsource" transform="translate(0,-33)" d="M0 0v18.608c0 1.032.476 2.007 1.29 2.643l14.22 11.111c.59.461 1.317.711 2.066.71h159.695V0z"/>
      <clipPath id="fltcnrCP1">
        <use href="#cpsource" y="100%" />
      </clipPath>
    </defs>
  </svg>
  <div id="Song2sub"></div>
</div>

Answer 2

您能否只旋转红色元素并移动它？

SVG剪辑路径的坐标翻转？

2 个答案: