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

Question

I have a svg path that I am trying to use as a clip mask. When I add the svg path to an svg element, its size lines up with the image I want to clip. However, If I copy and paste the same path into a clipPath element, it changes size. In the code below you can see that the same path is used to draw an svg and in a clipPath. The drawn path is the correct size, however the clipPath is larger.

  <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>

Why is the path changing size when placed in the clipPath?

Answer 1

You don't say, but I assume you are clipping an HTML element?

When a clipPath is used outside of the SVG, it is not longer subject to the scaling that happens due to the viewBox . So it will be used, as defined, at 1:1 scale.