为什么svg路径在clipPath元素内部改变大小？

Question

我有一个svg路径，我试图用作剪辑蒙版。当我将svg路径添加到svg元素时，它的大小与我想剪辑的图像对齐。但是，如果我将相同的路径复制并粘贴到clipPath元素中，则会更改大小。在下面的代码中，您可以看到相同的路径用于绘制svg和clipPath。绘制的路径是正确的大小，但clipPath更大。

  <svg id="clip-svg" viewBox="0 0 374 518">  
    <path d="M374,0l-41.7,492.3c0,0-61.6,25.7-143.3,25.7S41.7,492.3,41.7,492.3L0,0C12,16.1,366.2,17.7,374,0z"/>
    <defs>
      <clipPath id="clip-path">
        <path d="M374,0l-41.7,492.3c0,0-61.6,25.7-143.3,25.7S41.7,492.3,41.7,492.3L0,0C12,16.1,366.2,17.7,374,0z"/>
      </clipPath>
    </defs>
  </svg>

为什么路径在放入clipPath时会改变大小？

Answer 1

你不能说，但我认为你正在剪辑一个HTML元素？

当在SVG之外使用clipPath时，它不再受viewBox引起的缩放的影响。因此，按照定义，它将以1：1的比例使用。