SVG图像元素在旋转时被裁剪

Question

我已经创建了一个SVG元素和一个路径。它不是长方形，是不规则的形状。现在，我需要向它添加一个图像，用户可以拖动它并保留在路径元素中。所以，我用填充来做到这一点。

问题是，当我通过添加一些变换来旋转元素时，边缘被切断。

<svg id="magic"> 
    <pattern id="logo" patternUnits="userSpaceOnUse" height="900" width="900"> 
     <image xlink:href="libs/streetview/img/blank.png" transform="rotate(90,40,20)" /> 
    </pattern> 
    <path class="classic" d="M4,79 A85,82,0,0,1,94,8 L94,282 4,283 Z" fill="url(#logo)" /> 
</svg> 

PS：这是九百分之九百，因为我想一个单一的形象，同时填充是在重复它，九百分之九百确保重复模式实在是太遥远，而不是用户的视口内。

Answer 1

想象一下<pattern>就像您正在绘制的画布一样。图像的任何从左上角旋转过来的部分都会被截断。

我建议你改用<clipPath>。你将能够旋转你的图像到你的心中。