旋转时SVG图像元素被裁剪

Question

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

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

<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：900/900是因为我需要单个图像，而填充是重复它，900/900确保重复图案太远而不在用户的视口内。

Answer 1

将<pattern>视为您正在绘制的画布。图像中任何从左上边缘旋转的部分都将被切断。

我建议您改用<clipPath>。您将能够将图像旋转到您的内容。