Mask rotated SVG element

谁都会走 提交于 2019-12-05 18:02:54

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>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!