将SVG路径数据转换为0-1范围,以用作objectBoundingBox的clippath

Question

我使用从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？

RE:评论.我能够将任意数量的变换应用于SVG元素,但它仍然不能与objectBoundingBox一起使用.例如:

<clippath id="clipping" transform="scale(1,1)" clipPathUnits="objectBoundingBox">

Answer 1

按照@Robert Longson 的评论，只需将<clipPath>.

对于这个例子，我从 Figma 中得到的形状是 248 x 239，所以我只应用了等效的比例（1/248，1/239）。这给出：

transform="scale(0.004032258064516, 0.00418410041841)"

这clipPathUnits="objectBoundingBox"意味着我们可以使用此形状以任何大小或纵横比进行剪辑。

transform="scale(0.004032258064516, 0.00418410041841)"

.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;
}

Answer 2

使用以下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位置