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

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了？

回复:评论。我可以对SVG元素应用任意数量的转换，但它仍然不适用于objectBoundingBox。例如：

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

Answer 1

在@Robert Longson的评论之后，只需改变<clipPath>的规模。

对于这个例子，我从图中得到的形状是248x239，所以我只是应用了等效的比例(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>

​

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);

只需根据您的边界框设置适当的宽度和高度变量。

可以在以下问题的答案中找到此脚本：How to apply clipPath to a div with the clipPath position being relative to the div position

Answer 3

我在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喜欢导出这些浮点数)。