Angularjs SVG图像正在脱离SVG边界

我正在使用SVG在一个Ionic应用程序中显示用户的配置文件图片。当我导航到屏幕时，图像有时会脱离SVG边界。我还附上了同样的截图。。。。。

注意：userPics.photo1->这是我使用AngularJS加载的图像的url

我尝试将样式溢出：隐藏应用于SVG，但图像仍然退出SVG的边界。我不熟悉使用SVG。提前感谢各位：）

 <svg viewBox="0 0 120 100" style="width: 200px; height: 200px; overflow: hidden" ng-click="openProfileModal()">
                    <defs>
                        <clipPath id="hexagon_clip">
                          <path id="hexagon" d="M38,2 
                               L82,2 
                               A12,12 0 0,1 94,10 
                               L112,44 
                               A12,12 0 0,1 112,56
                               L94,90       
                               A12,12 0 0,1 82,98
                               L38,98
                               A12,12 0 0,1 26,90
                               L8,56
                               A12,12 0 0,1 8,44
                               L26,10
                               A12,12 0 0,1 38,2" />
                        </clipPath>
                    </defs>
                    <image ng-href="{{ userPics.photo1 }}" xlink:href="" x="0" y="0" width="100%" height="100%" clip-path="url(#hexagon_clip)" preserveAspectRatio="xMinYMin slice"/>
                    <use xlink:href="#hexagon" x="0" y="0" stroke="gray" stroke-width="1" fill="transparent" />
                </svg>