我可以在 svg 剪辑路径上设置固定的宽度和高度吗？

Question

是否有任何解决方案可以设置 svg 剪辑路径不随我应用的标签缩放？我想缩放 g 标签并保持剪辑路径大小固定。

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 135 190">
      <clipPath id="clip-1">
        <path d="M516.16,170h0L468.74,92A9.19,9.19,0,0,0,453,92L405.61,170a66.66,66.66,0,1,0,110.55,0Z" transform="translate(-394.23 -87.62)"/>
      </clipPath>
      <g class="waves" style="clip-path:url(#clip-1);fill:#F3E5F5;">
        <path id="wave" d="m-115,50q38-30 75,0t75,0 75,0 75,0
    75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0
    v20 h-1540 v-20"/>
    <clipPath id="wave-clip-front">
      <use class="wave wave-front" href="#wave" />
      <rect x="0" y="70" width="100%" height="100%" />
    </clipPath>
    <clipPath id="wave-clip-middle">
      <use class="wave wave-middle" href="#wave" />
      <rect x="0" y="70" width="100%" height="100%" />
    </clipPath>
    <clipPath id="wave-clip-back">
      <use class="wave wave-back" href="#wave" />
      <rect x="0" y="70" width="100%" height="100%" />
    </clipPath>
    <linearGradient id="grad-front" x1="-22%" y1="-21.2941%" x2="122%" y2="121.294%">
      <stop offset="0%" stop-color="rgb(48,34,173)" stop-opacity="1" />
      <stop offset="100%" stop-color="rgb(200,109,215)" stop-opacity="1" />
    </linearGradient>
    <rect id="clipped-wave" x="0" y="0" width="100%" height="100%" />
  </defs>
  <use href="#clipped-wave" clip-path="url(#wave-clip-back)" fill="url(#grad-front)" fill-opacity="0.47"  />
  <use href="#clipped-wave" clip-path="url(#wave-clip-middle)" fill="url(#grad-front)" fill-opacity="0.47"  />
  <use href="#clipped-wave" clip-path="url(#wave-clip-front)" fill="url(#grad-front)" fill-opacity="0.88" />
      </g>
    </svg>

Answer 1

将要转换的 <g> 包裹在另一个 <g> 中。然后将剪辑路径应用于外部组。

<g style="clip-path:url(#clip-1);">
  <g class="waves" style="fill:#F3E5F5;" transform="..whatever..">
    ...etc...
  </g>
</g>

我可以在 svg 剪辑路径上设置固定的宽度和高度吗？

Can I set fixed width and height on svg clip-path?

html

css

svg