画布上的SVG剪辑路径在手机上中断

Question

我在画布上设置了一个SVG剪辑路径。在我的电脑上，在画布上画画可以在Firefox、Edge和Chrome中使用，但在我的iPhone上，画布在Firefox和Safari中消失了。

document.getElementById('can').onclick = function(evt) {
evt.target.getContext('2d').fillRect(125, 50, 50, 50);
};

canvas {
background: #0f0;
clip-path: url(#diamond);
}

<p>Click in canvas to draw black square.</p>
<canvas id='can' width='300' height='150'></canvas>
<svg width='0' height='0'>
<clipPath id='diamond' clipPathUnits="objectBoundingBox">
<path d="M0,0.5 0.5,0 1,0.5 0.5,1 Z" />
</clipPath>
</svg>

Answer 1

显然是一个错误，您应该报告。

作为一种变通方法，您可以将clip-path应用于包装器/父元素：
(在iOS safari上测试(

document.getElementById('can').onclick = function(evt) {
evt.target.getContext('2d').fillRect(125, 50, 50, 50);
};

.canvasWrp {
width: 300px;
height: 150px;
background: #0f0;
clip-path: url(#diamond);
}

<p>Click in canvas to draw black square.</p>
<div class="canvasWrp">
<canvas id='can' width='300' height='150'></canvas>
</div>
<svg width='0' height='0'>
<clipPath id='diamond' clipPathUnits="objectBoundingBox">
<path d="M0,0.5 0.5,0 1,0.5 0.5,1 Z" />
</clipPath>
</svg>