如何让SVG <pattern>中的图案旋转时超出边界不被裁剪？

我创建了一个带有图标的SVG图案，用户可拖动滑块旋转图案中的图标，相关代码如下：

初始代码 #

JavaScript #

const slider = document.getElementById("slider")

const carrotIcon = document.getElementById("carrotIcon")

slider.oninput = function(){ 
  carrotIcon.setAttribute('transform', 'rotate('+slider.value+' 25 25) translate(0 0)')
}

HTML #

<svg width="200px" height="150px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <symbol id="carrot" viewBox="0 0 50 50">
        <rect width="50" height="50" fill="none" stroke="black" stroke-width="1"/>
    <path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
  </symbol>
  
  <pattern id="myPat" patternUnits="userSpaceOnUse" width="50" height="50" patternTransform="rotate(0)">
    <use id="carrotIcon" xlink:href="#carrot" width="50" height="50" fill="orange" transform="rotate(0 25 25) translate(0 0)"></use>
  </pattern>
  
  <rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)"> </rect>
</svg>

<p style=font-size:15px>Rotate Icons </p>
<input id="slider" type="range" min="0" max="360" value="0" step='1' >

旋转时图案内容会被<pattern>的边界裁剪，因为部分维度下图案内容大于pattern边框：

我希望旋转时图案内容能超出pattern边界，实现图案间的重叠效果，预期效果如下：

请问该如何实现？

2023年2月2日更新：[已尝试但未解决]

我尝试使用尺寸大于<pattern>的图标：将<pattern>宽高设为50，<use>宽高设为70，但图标仍会被裁剪，相关代码如下：

尝试的代码 #

JavaScript #

const slider = document.getElementById("slider")

const carrotIcon = document.getElementById("carrotIcon")

slider.oninput = function(){ 
  carrotIcon.setAttribute('transform', 'rotate('+slider.value+' 25 25) translate(0 0)')
}

HTML #

<svg width="200px" height="150px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <symbol id="carrot" viewBox="0 0 50 50" overflow="visible">
     <g id="carrotIcon">
        <path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
     </g>
  </symbol>
  
  <pattern id="myPat" patternUnits="userSpaceOnUse" width="50" height="50" style="overflow:visible">
    <use xlink:href="#carrot" width="70" height="70" fill="orange"></use>
    <use xlink:href="#carrot" x="-50" width="70" height="70" fill="orange"></use>
    <use xlink:href="#carrot" x="50" width="70" height="70" fill="orange"></use>
    <use xlink:href="#carrot" y="-50" width="70" height="70" fill="orange"></use>
    <use xlink:href="#carrot" y="50" width="70" height="70" fill="orange"></use>
  </pattern>
  
  <rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)" overflow="visible"> </rect>
</svg>

<p style=font-size:15px>Rotate Icons </p>
<input id="slider" type="range" min="0" max="360" value="0" step='1' >

图标裁剪情况：

内容的提问来源于stack exchange，提问作者Hesper