html - 将 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> 的比例即可.

在这个例子中，我从 Figma 中获取的形状是 248 x 239，所以我只应用等效比例(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>