遮罩旋转的 SVG 元素答案

【问题标题】：Mask rotated SVG element遮罩旋转的 SVG 元素
【发布时间】：2013-07-17 09:03:39
【问题描述】：

我正在使用svg.js 来绘制我的 SVG。我想知道，是否可以屏蔽旋转的元素。我可以实现旋转蒙版元素，这是不一样的。

查看一个最小的工作示例 - http://jsfiddle.net/mreq/LP7sa/1/ - 我希望旋转后的图像被红色矩形遮住。该示例生成以下代码：

<svg xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1000" version="1.1" width="100%" height="100%" xlink="http://www.w3.org/1999/xlink" style="position:relative;overflow:hidden;left:0px;top:0px;">
<rect id="SvgjsRect1003" width="50%" height="50%" y="75" x="125" fill="red"/>
<image id="SvgjsImage1004" href="http://t1.gstatic.com/images?q=tbn:ANd9GcQo_CFlPKdX-_-EEs34S-Y8T9l2kVNY59fwfhCKHBK90XSwS21grA" width="400" height="250" transform="rotate(75 200 125)" mask="url(&quot;#SvgjsMask1005&quot;)"/>
<defs id="SvgjsDefs1001">
    <mask id="SvgjsMask1005">
        <rect id="SvgjsRect1002" width="50%" height="50%" fill="#ffffff" x="125" y="75"/>
    </mask>
</defs>
</svg>

解决方案可以是通用的 SVG 解决方案 - 它不必使用 svg.js 并且可以使用任何其他库。我尝试旋转蒙版矩形，但这不起作用，因为我还需要调整图像大小、移动和翻转图像。

【问题讨论】：

标签： html css svg svg.js

【解决方案1】：

只需将遮罩（或剪辑路径）放在父 <g> 元素上，例如 this：

<svg xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1000" version="1.1" width="100%" height="100%" xlink="http://www.w3.org/1999/xlink" style="position:relative;overflow:hidden;left:0px;top:0px;">
    <defs>
        <mask id="mask" maskUnits="userSpaceOnUse">
            <rect id="SvgjsRect1003" width="50%" height="20%" y="75" x="125" fill="white"/>
        </mask>
    </defs>
    <g mask="url(#mask)">
        <image id="SvgjsImage1004" xlink:href="http://t1.gstatic.com/images?q=tbn:ANd9GcQo_CFlPKdX-_-EEs34S-Y8T9l2kVNY59fwfhCKHBK90XSwS21grA" width="400" height="250" transform="rotate(75 200 125)" />
    </g>
</svg>

【讨论】：

太棒了！非常感谢，您让我免于将整个应用程序重写为 HTML5 画布。如果我能多次投票就好了。