SVG剪切路径用于根据特定路径剪切SVG形状。也称为SVG裁剪。
路径内部的形状部分是可见的, 而外部的部分则是不可见的。
例子
<!DOCTYPE html>
<html>
<body>
<svg height="450" width="450">
<defs>
<clipPath id="clip">
<rect x="15" y="15" width="40" height="40" />
</clipPath>
</defs>
<circle cx="25" cy="25" r="30"
style="fill: #0000ff; clip-path: url(#clip); " />
</svg>
</body>
</html>
立即测试
解释
- 现在, 你可以看到剪切路径内的圆形部分可见的其余部分都被剪切了。
- <clipPath>元素的id属性定义剪辑路径的唯一名称。
微信公众号
手机浏览(小程序)
Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages:
error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in
/mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line
57
Warning: get_headers(): Failed to enable crypto in
/mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line
57
Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_46662.jpg): failed to open stream: operation failed in
/mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line
57
