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

【问题标题】：Convert SVG path data to 0-1 range to use as clippath with objectBoundingBox将 SVG 路径数据转换为 0-1 范围以用作带有 objectBoundingBox 的剪辑路径
【发布时间】：2015-09-21 12:16:24
【问题描述】：

我使用从 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">

【问题讨论】：

把它包裹在一个变换中，你可以有任何你喜欢的范围。
几种变体，但该技术不起作用。你有一个成功的例子吗？
1 级转换什么都不做。您需要将其缩小，以便缩放后路径的范围映射为 1。

标签： html css svg

【解决方案1】：

按照@Robert Longson 的cmets，只需变换<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>

【讨论】：

请注意calc() 将不起作用，您需要按照此处的方式预先计算比率
谢谢！这终于帮助我理解了将值转换为 0-1
有史以来最简单的解决方案！谢谢！
基于@ksav 的回答，我认为我应该包含一个带有复杂 SVG 徽标的示例。我使用了 1000 x 500 像素的简单纵横比。这相当于：transform="scale(0.001, 0.002)"。通过使图像与 SVG 的大小完全相同来保持理智。我在这里做了一个 Codepen codepen.io/Kerrys7777/pen/yLOrejL
yoksel.github.io/relative-clip-path

【解决方案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

【讨论】：

太棒了！这个脚本可以工作！但不幸的是，我最终在我的 SVG 文件上失去了一些分数...... =(
哦，我的错误！我已经切换了宽度和高度值！非常感谢你们！！！如果不是你，我什至不知道我会浪费多少时间。谢谢你，谢谢你，谢谢你！也许我们可以将这段代码托管在其他地方，甚至可以将其翻译成其他语言（如 JavaScript）。 =D 太好了！
更多人使用same problem。
知道为什么我的路径转换不起作用吗？它是由 Photoshop 生成的，唯一明显的区别似乎是形状之间缺少空间。我在 chrome 控制台中看到的错误：“错误：属性 d：预期数字，“…16,0.00102421875c0.0272633531157…”。 pastebin.com/raw/7Y7UApp5

【解决方案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 喜欢导出这些）。

【讨论】：