我正在使用 svg.js 绘制我的SVG图形。我想知道是否有可能遮罩旋转的元素。我可以实现旋转遮罩元素,但这并不相同。
请参见最小工作示例 - http://jsfiddle.net/mreq/LP7sa/1/ - 我希望旋转的图像被红色矩形遮罩。该示例生成以下代码:
请参见最小工作示例 - 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("#SvgjsMask1005")"/>
<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,可以使用任何其他库。我尝试旋转遮罩矩形,但这样做不行,因为我还需要调整图像的大小、移动和翻转。