遮罩旋转的SVG元素 [英] Mask rotated SVG element
问题描述
我正在使用 svg.js 绘制我的SVG.我想知道是否有可能掩盖旋转的元素.我可以实现旋转的遮罩元素,这是不一样的.
I am using svg.js to draw my SVG. I was wondering, whether it's possible to mask rotated element. I could achieve rotating masked element, which isn't the same.
查看一个最小的工作示例- http://jsfiddle.net/mreq/LP7sa/1/-我希望旋转后的图像被红色矩形遮盖.该示例产生以下代码:
See a minimal working example - http://jsfiddle.net/mreq/LP7sa/1/ - I'd like the rotated image to be masked with the red rectangle. The example produces following code:
<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,也可以使用任何其他库.我尝试旋转遮罩矩形,但是那样也无法完成,因为我也需要调整图像的大小,移动和翻转.
The solution can be a generic SVG one - it doesn't have to use svg.js and can use any other library. I tried rotating the mask-rectangle, but that wouldn't do as I need to resize, move and flip the image too.
推荐答案
Just put the mask (or clip-path) on a parent <g>
element, like 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>
这篇关于遮罩旋转的SVG元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!