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

Question

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

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

<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 确保重复图案太远并且不在用户的视口(viewport)内。

Answer 1

想一个<pattern>就像您正在上面绘画的 Canvas 一样。图像中任何从左上角旋转出来的部分都将被剪掉。

我建议您使用<clipPath>反而。您将能够根据自己的喜好旋转图像。