【发布时间】：2015-06-12 07:19:55
【问题描述】：
不确定我是否正确地制定了标题，但问题来了。
我有一个云状的 SVG 路径，我想在 CSS 中使用 clip-path 属性。
<path d="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" fill="lightblue" />
当我在 HTML 中添加一个 SVG 元素并使用该路径定义 <clipPath> 时，浏览器会将剪切路径定位在左上角。如果我对被剪裁的元素应用边距，则掩码不会链接并保持在其初始位置。
其他类似的线程声明应该将clipPathUnits="objectBoundingBox" 属性添加到<clipPath> 对象中，但这似乎并不能解决我的问题。我什至将路径从绝对路径转换为相对路径并尝试过，但得到了相同的结果。
是否有可能以某种方式将剪切路径与被剪切的元素链接起来，以便在将定位应用于被剪切的元素时，剪切路径也会移动？
这里是相对路径，如果有帮助的话：
<path d="M46.9819755,61.8637972c-4.974,5.021,-11.906,8.136,-19.573,8.136c-15.137,0,-27.409,-12.144,-27.409,-27.125c0,-9.93,5.392,-18.613,13.436,-23.34c1.381,-11.012,10.871,-19.535,22.373,-19.535c8.122,0,15.24,4.25,19.209,10.625c3.22,-1.753,6.918,-2.75,10.852,-2.75c12.452,0,22.547,9.99,22.547,22.313c0,1.972,-0.259,3.885,-0.745,5.707l0,0c5.682,2.791,9.586,8.59,9.586,15.293c0,9.423,-7.719,17.062,-17.241,17.062c-4.533,0,-8.657,-1.731,-11.735,-4.562c-2.721,1.778,-5.981,2.812,-9.485,2.812c-4.572,0,-8.729,-1.761,-11.815,-4.636z fill="lightblue" />
以及一些测试 HTML/CSS。 （我已将left 属性设置为10px，以便您看到出现剪辑问题）
.clippedElement {
width: 200px;
height: 200px;
position: absolute;
left: 10px;
top: 0;
background-color: lightblue;
-webkit-clip-path: url(#cloudClip);
-moz-clip-path: url(#cloudClip);
clip-path: url(#cloudClip);
}<svg>
<defs>
<clipPath id="cloudClip">
<path d="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"
/>
</clipPath>
</defs>
</svg>
<div class="clippedElement"></div>【问题讨论】：
-
为什么objectBoundingBox没有解决你的问题？
-
我不确定。当我添加该属性时，div 根本不显示。它只是纯白色。随意使用示例代码。
-
您必须将所有值从用户单位转换为边界框单位。边界框值应在 0 到 1 的范围内。我猜在您的情况下，这意味着将所有值除以 200
-
感谢您的意见。我已经使用 RaphaelJS 将路径转换为相对路径，但我想这不是它应该去那里的。直到明天我才能对此进行测试，但我会及时通知您。
-
嘿罗伯特，只是想感谢你为我指明了正确的方向。我设法解决了这个问题。答案是用一个小的 PHP sn-p 发布的，我用它来将路径转换为边界框值。