为什么 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 规模使用。

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

Why does the svg path change size when inside a clipPath element?

html

css

image

svg

clip