将 SVG 路径数据转换为 0-1 范围以用作带有 objectBoundingBox 的剪辑路径 [英] Convert SVG path data to 0-1 range to use as clippath with objectBoundingBox

问题描述

我使用从 Illustrator 导出的相当复杂的 SVG 形状作为剪切路径.

I'm using a rather complex SVG shape exported from Illustrator as a clipping path.

问题是 objectBoundingBox 要求路径数据在 0-1 范围内，而我的路径包含超出此范围的路径数据.这是我正在使用的:

The problem is that objectBoundingBox requires path data to be within the 0-1 range, and my path contains path data out of this range. Here is what I'm using:

<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?

Is there an easy solution to convert this to the 0-1 range so that I can use objectBoundingBox?

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

RE: Comment. I am able to apply any number of transforms to the SVG element, but it still doesn't work with objectBoundingBox. For example:

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

推荐答案

按照@Robert Longson 的评论，只需转换 的比例.

Following the comments from @Robert Longson, just transform the scale of the <clipPath>.

我从 Figma 中获取的形状为 248 x 239，所以我只应用了等效比例(1/248、1/239).这给出:

The shape I have taken from Figma for this example is 248 x 239, so I just apply the equivalent scale(1/248, 1/239). This gives:

transform="scale(0.004032258064516, 0.00418410041841)"

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

This along with clipPathUnits="objectBoundingBox" means that we can use this shape to clip at any size or aspect ratio.

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

这篇关于将 SVG 路径数据转换为 0-1 范围以用作带有 objectBoundingBox 的剪辑路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！