HTML SVG 怎么实现自定义形状的图片裁剪框-H5教程-PHP中文网

svg中用实现图片裁剪需将路径定义在内并设唯一id，引用时用url(#id)；响应式裁剪须设clippathunits="objectboundingbox"，坐标归一化为0–1，图片需显式添加clip-path属性。

html svg 怎么实现自定义形状的图片裁剪框

用 SVG 的 <clippath></clippath> 实现自定义形状的图片裁剪框，核心是“先定义轮廓，再套到图片上”，不改图片本身、不依赖 JS、缩放也稳。

必须把裁剪路径写在里

浏览器只认 <defs></defs> 内部定义的 <clippath></clippath>，写在外面或直接塞进 <svg></svg> 根标签下都不生效。ID 要全局唯一，引用时严格用 url(#id) 格式：

<defs><clippath id="heart"><path d="M50,10 A40,40 0 0,1 90,50 L75,65 A20,20 0 0,0 50,80 A20,20 0 0,0 25,65 L10,50 A40,40 0 0,1 50,10 Z"></path></clippath></defs> ✅
<clippath id="heart">...</clippath> 直接放在 <svg></svg> 下 ❌
clip-path: #heart 或 clip-path: url(heart) ❌（缺 url() 或 #）

坐标单位选对才不会偏移

默认 clipPathUnits="userSpaceOnUse"，数值按像素算，图片一缩放就错位；要做响应式裁剪框，必须显式设为 objectBoundingBox，这时所有坐标是 0–1 的相对值：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<clippath clippathunits="objectBoundingBox"><circle cx="0.5" cy="0.5" r="0.4"></circle></clippath> → 圆心居中、半径占宽高较小值的 40%，缩放不变形
<polygon points="0,0 1,0 1,0.6 0.5,1 0,0.6"></polygon> → 一个带尖角的五边形，始终贴图边界
混用像素和小数（如 cx="50" 和 cx="0.5"）会导致裁剪区域漂移

图片必须用或显式引用

<clippath></clippath> 不会自动作用于子元素，被裁图片得自己带上 clip-path 属性：

<image href="photo.jpg" width="200" height="200" clip-path="url(#heart)"></image> ✅（SVG 内嵌图片）
<img src="photo.jpg" style="max-width:90%" style="max-width:90%" style="max-width:90%"> ✅（HTML 图片，需注意 Safari 旧版兼容性）
<g clip-path="url(#heart)"><image ...></image></g> ❌（<g></g> 不继承裁剪，<image></image> 自身没设属性就不裁）