我使用从Illustrator导出的相当复杂的SVG形状作为剪切路径.
问题是objectBoundingBox要求路径数据在0-1范围内,并且我的路径包含超出此范围的路径数据.这是我正在使用的:
<svg>
<clippath id="clipping" clipPathUnits="objectBoundingBox">
<path d="M228.6,94.8L176.8, 5.5c-2-3.5-5.8-5.5-9.9-5.5H63.2c-4.1, 0-7.8, 1.9-9.9,5.5L1.5,94.9c-2, 3.5-2,7.8,0, 11.4 l51.8, 89.8c2,3.5, 5.8,5.9,9.9,5.9h103.7c4.1, 0, 7.8-2.4,9.9-6l51.8-89.7C230.7, 102.8,230.7, 98.3,228.6,94.8z M192.8,104.4l-35.5,
61.5c-1.4,2.4-4,4.1-6.8, 4.1h-71c-2.8,0-5.4-1.7-6.8-4.1l-35.5-61.4c-1.4-2.4-1.4-5.5,0-7.9l35.5-61.5c1.4-2.4,4-4.1,6.8-4.1h71c2.8, 0, 5.4,1.7,6.8,4.1l35.5, 61.4C194.2,98.9, 194.2, 102, 192.8, 104.4z"/>
</clippath>
</svg>
Run Code Online (Sandbox Code Playgroud)
有没有一个简单的解决方案将其转换为0-1范围,以便我可以使用objectBoundingBox?
RE:评论.我能够将任意数量的变换应用于SVG元素,但它仍然不能与objectBoundingBox一起使用.例如:
<clippath id="clipping" transform="scale(1,1)" clipPathUnits="objectBoundingBox">
Run Code Online (Sandbox Code Playgroud) 我正在尝试创建64个方块,并为每个方块赋予独特的背景颜色.我非常接近,但我似乎只能得到一种随机颜色.
function randomCol() {
return Math.floor(Math.random()*16777215).toString(16);
}
$(function(){
for(i=0; i<64; i++) {
$('<div class="square"></div>').insertAfter(".starter");
$(".square").css({'background':'#' + randomCol()});
}
});
Run Code Online (Sandbox Code Playgroud)