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

【问题标题】：Why does the svg path change size when inside a clipPath element?为什么在 clipPath 元素内时 svg 路径会改变大小？
【发布时间】：2018-04-06 09:21:35
【问题描述】：

我有一个 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中的路径会改变大小？

【问题讨论】：

标签： html css image svg clip

【解决方案1】：

你没有说，但我假设你正在剪辑一个 HTML 元素？

当在 SVG 之外使用 clipPath 时，它不再受到由于 viewBox 而发生的缩放影响。因此，它将按照定义以 1:1 的比例使用。

【讨论】：