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"一起使用意味着我们可以使用此形状以任意大小或长宽比进行裁剪。

.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

我在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喜欢将其导出）。

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

2 个答案: