将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的评论之后，只需变换<clipPath>的比例即可.

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屋！