我使用从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>
有没有一个简单的解决方案可以将其转换为0-1范围，以便我可以使用objectBoundingBox？
回复：评论。我可以对SVG元素应用任意数量的转换，但它仍然不能与objectBoundingBox一起使用。例如：
<clippath id="clipping" transform="scale(1,1)" clipPathUnits="objectBoundingBox">
根据@Robert Longson的评论，只需转换<clipPath>的比例。
在这个例子中，我从图中得到的形状是248 x 239，所以我只应用了等效的比例(1/248，1/239(。这给出：
transform="scale(0.004032258064516, 0.00418410041841)"
这与clipPathUnits="objectBoundingBox"一起意味着我们可以使用此形状以任何大小或纵横比进行剪裁。
.clipped {
clip-path: url(#clip-shape);
}
/* make sure the svg doesn't take up any space in the document */
svg {
width: 0;
height: 0;
}
p {
width: 200px;
color: white;
background: blue;
}<!-- Note: SVG width & height have no effect here, but I've left them for reference -->
<svg width="248" height="239">
<defs>
<clipPath id="clip-shape" clipPathUnits="objectBoundingBox" transform="scale(0.0040, 0.0042)">
<path d="M199 30C110 36 2.03409 -46.9894 18 43C29 105 -7.39156 155.325 1.99998 197C18 268 69.8645 202.231 170 237C242 262 288 24 199 30Z" />
</clipPath>
</defs>
</svg>
<img class="clipped" src="https://picsum.photos/80/80" alt="">
<img class="clipped" src="https://picsum.photos/300/200" alt="">
<img class="clipped" src="https://picsum.photos/100/300" alt="">
<p class="clipped">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac est eu risus posuere consectetur vitae sed elit. Quisque mollis, nunc pretium porta eleifend, ligula risus mattis magna, vel tristique lacus massa consectetur mi. Ut sed dui diam. Mauris
ut mi risus.</p>使用以下php脚本，您可以转换它们：
$absolute_path = "M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z";
function regex_callback($matches) {
static $count = -1;
$count++;
$width = 98;
$height = 70;
if($count % 2) {
return $matches[0] / $height;
} else {
return $matches[0] / $width;
}
}
$relative_path = preg_replace_callback('(d+(.d+)?)', 'regex_callback', $absolute_path);
只需根据您的边界框设置适当的宽度和高度变量。
这个脚本可以在以下问题的答案中找到：如何将clipPath应用于div，其中clipPath位置相对于div位置
我在CodePen上编写了一个转换器，试图解决这个问题。它松散地基于skywlkrs的答案，但它支持指数浮动，并添加了一些UI：
https://codepen.io/21sieben/full/gQYdEB/
例如，这将转换
M11.214377,3.55271368e-15 L64,0 L64,64 L11.214377,64 L1.88513642,41.4772208 C-0.628378807,35.4090582 -0.628378807,28.5909418 1.88513642,22.5227792 L11.214377,3.55271368e-15 Z
至
M0.17522,0 L1,0 L1,1 L0.17522,1 L0.02946,0.64808 C-0.00982,0.55327 -0.00982,0.44673 0.02946,0.35192 L0.17522,0 Z
请注意一些浮动中的指数(Sketch喜欢导出这些指数(。