Question

我一直在对Canvas和SVG进行大量研究，以及CSS3 3d变换，我想一起使用它们，而且我很难将它全部工作。我有一个包含基于图像的蒙版的SVG元素，以及一个包含我想要屏蔽的HTML的foreignObject元素，特别是一个画布。根据我对画布的处理方式，我在不同的浏览器中得到不同的结果，通常不是我想要的。在大多数浏览器中，应用典型的画布操作（例如rect（））并应用典型的CSS转换（例如rotate3d（））会导致SVG图像蒙版不再应用于画布，整个画布将可见，包括蒙面部分。

Safari（桌面）：如果画布曾以任何方式绘制或转换（例如，即使是rotate3d（1,1,0,0deg）），它也不会被屏蔽。
Safari（iOS 7）：如果画布曾以任何方式被绘制或转换，它将不会被屏蔽。
Chrome（桌面）：在这里，我们可以绘制到画布并且它仍然会被屏蔽，但如果它已被转换，它将不会被屏蔽。
Chrome（iOS 7）：如果画布已被绘制或转换，则不会屏蔽它。
Firefox：这里没问题;即使它被绘制和转换，它仍然会被掩盖。
IE和其他人：我还没有检查过。

您可以通过应用以下代码来说明这一点，该代码也在此处托管，我在其中设置了一个示例页面：http://kage23.com/masktest.html

<svg width="748" height="421" baseProfile="full" version="1.2">
    <defs>
        <mask id="myMask" transform="scale(1)">
            <image width="100%" height="421" xlink:href="http://i.imgur.com/ORtP2fW.png" />
        </mask>
    </defs>
    <foreignObject id="foreignObject" width="100%" height="421">
        <div style="background-color: green; width: 100%; height: 421px;">
            <p id="myParagraph" style="padding-top: 100px; padding-left: 200px;">Some text or whatever.</p>
            <canvas id="effectCanvas" width="500px" height="100px" style="background-color: red;"></canvas>
        </div>
    </foreignObject>
</svg>

<button onclick="applyMask()">Apply mask</button>
<button onClick="drawToCanvas()">Draw to canvas</button>
<button onClick="rotateCanvas()">Apply rotation to canvas</button>

<script>
var applyMask = function ()
{
    var element = document.getElementById('foreignObject');
    element.style.mask = 'url(#myMask)';
};
var drawToCanvas = function ()
{
    var canvas = document.getElementById('effectCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);
};
var rotateCanvas = function ()
{
    var canvas = document.getElementById('effectCanvas');
    canvas.style.webkitTransform = 'rotate3d(1,1,1,45deg)';
    canvas.style.MozTransform = 'rotate3d(1,1,1,45deg)';
};
</script>

有更好的方法吗？我不承诺必须使用SVG蒙版;我只需要能够屏蔽一个正在积极绘制的转换画布。最初，我使用的是-webkit-mask-box-image，但是根本不支持它。

如何以跨浏览器的方式在svg掩码后面使用和转换画布？

0 个答案: